.sp-icon-picker {
    width: 1080px;
    height: 860px;   
    overflow: visible;
    position: relative;

    .sp-icon-picker-close-btn{
        position: absolute;
        top: 0;
        right: 6px;
        font-size: 16px;
        color: #641dd7;
        svg path {
            fill: #641dd7;
        }
        &:hover{
            color: #787878;
        }
    }

    .components-modal__content {
        margin-top: 0; 
        overflow: visible;
    }
    .components-modal__header {
        display: none;
    }

    &-search-bar {
        position: relative;
        margin-bottom: 30px;
        input {
            width: 100%;
            font-size: 13px;
            height: 32px;
            border: 1px solid #ddd;
            padding-left: 40px;
            border-radius: 6px;
        }
        svg {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 20px;
        }
    }

    &-title {
       margin: 0;
       font-size: 20px;
       font-weight: 400;
       line-height: 28px;
       margin-bottom: 34px;
    }

    &-body {
        display: flex;
        gap: 20px;
        padding: 20px;
    }
    &-sidebar {
        flex: 0 0 160px;
        padding-right: 20px;
        .sp-smart-post-divider {
            width: 100%;
            margin: 0;
        }
        h4 {
            margin: 0;
            font-size: 13px;
            font-weight: 600;
            color: #757575;
            margin: 10px 0;
        }
    }
    &-cat-list {
        li {
            margin: 0;
            input[type="checkbox"]:focus,
            input[type="checkbox"] {
                border-color: var(--sp-smart-primary-2-700);
                box-shadow: none;
                &:checked::before {
                    content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23641DD7%27%2F%3E%3C%2Fsvg%3E) ;
                }
            }
            button {
                padding: 10px 15px;
                border: none;
                background: transparent;
                width: 100%;
                text-align: left;
                cursor: pointer;
                transition: all .3s;
                border-radius: 4px;
                color: #2F2F2F;
            }

            &.active button,
            &:hover button {
                color: var(--sp-smart-primary-2-700);
                background-color: var(--sp-smart-primary-2-100);
            }
        }
    }
    &-style {
        li {
            border-radius: 4px;
            transition: all .3s;
            display: flex;
            align-items: center;
            padding: 0px 15px;
            label {
                padding: 10px 0;
                width: 100%;
                cursor: pointer;
            }

            &.active,
            &:hover{
                color: var(--sp-smart-primary-2-700);
                background-color: var(--sp-smart-primary-2-100);
            }
        }
    }
    &-content {
        flex: 1;
        height: 65vh;
        width: 30vw;
    }
    &-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        max-height: 680px;
        overflow-y: auto;
        padding: 22px;
        border: 1px solid #ddd;
        border-radius: 6px;
        height: calc(100% - 60px);

        ul {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(auto-fill, 80px);
            gap: 13px;        
            align-content: start;        
            
            li {
                width: 80px;
                height: 80px;
            }

            li button {
                border: 1px solid #ddd;
                background: transparent;
                text-align: center;
                width: 80px;
                height: 80px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                border-radius: 4px;
                &.active {
                    border-color: var(--sp-smart-primary-2-600);
                }
                svg {
                    width: 22px;
                    height: 22px;
                }
                span {
                    font-size: 11px;
                    color: #1E1E1E;
                    // white-space: nowrap;
                    margin-top: 6px;
                }
            }
        }
    }
    &-insert-btn {
        margin: 20px;
        background: var(--sp-smart-primary-2-600);
        display: block;
        margin-left: auto;
        color: #fff;

        &:hover {
            background: var(--sp-smart-primary-2-700);
            color: #fff !important;
        }
    }
}

@media (min-width: 960px) {
    .components-modal__frame.sp-icon-picker {
        max-height: 76%;
    }
}


.sp-icon-picker-selector-container {   
    display: flex;
    align-items: center;
    border: 1px solid #f0f0f0;
    border-radius: 1px;
    position: relative;
    // cursor: pointer;
    
    flex-direction: column;
    gap: 5px;
    height: 120px;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;

    .sp-icon-picker-default-icon path,
    .sp-icon-picker-active-icon path {
      fill: #333; 

    }
    .components-button.is-secondary,
    .components-button.is-secondary:hover{
        box-shadow: none;
        background-color: transparent;
    }

    .sp-icon-picker-selected-icon-container{        
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;

        .sp-icon-picker-remove-icon{   
            background-color: #dcdcde;
            color: #787878;
            font-size: 15px;
            height: 20px;
            position: absolute;
            right: 3px;
            top: 3px;
            width: 20px;
            border: none;  
            display: flex;
            align-items: center;
            justify-content: center;
           
            &:focus{
                outline: none;
            }
            .sp-icon-picker-remove-icon-svg{
                width: 15px;
                height: 15px;
            }     
        }
        .sp-icon-picker-active-icon{
            width: 40px;
            height: 40px;
        }
        .sp-icon-picker-active-icon-label{
            color: #333; 
        }
    }
}

.sp-icon-picker-selector-container.sp-is-pro {
    opacity: .6;
    pointer-events: none;
}