.components-modal__frame.progressmatify-icons-modal {
    width: 900px;
    height: 500px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    .progressmatify-icons-search {
        margin-bottom: 15px;
        input {
            width: 100%;
            border: 1px solid #ccc;
            height: 40px;
            padding: 15px;
        }
    }
}

.progressmatify-icon-btn.progressmatify-preview {
    width: 100%;
    height: 180px;
    border: 1px solid #ccc;
    background: #fefefe;
    border-radius: 3px;
    cursor: pointer;
    i {
        font-size: 50px;
    }
}

.progressmatify-icons-list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;

    .progressmatify-icon-btn {
        width: 100%;
        height: 54px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        transition: all 0.3s ease;
        cursor: pointer;

        path {
            transition: all 0.3s ease;
        }

        &.active {
            border-color: #2563eb;
            background: #2563eb;
            path {
                fill: #fff;
            }
        }

        &:hover {
            path {
                fill: #fff;
            }
        }
    }

    .progressmatify-icon-btn:hover {
        border-color: #2563eb;
        color: #ffffff;
        background: #2563eb;
    }
}