@import '../config/variables';

$search-background-color: #F6F9F;

$search-background-color-focus: #FFFFFF;
$search-box-shadow-color-focus: #0983FD;

$search-border-color: #F4F7F9;
$search-border-color-focus: #086acc;

.icon-picker-modal[data-theme='default'] {
    .icon-picker-modal__header {
        h2 {
            font-family: $font-family;
        }
    }

    .icon-picker-modal__search {
        background-color: #F6F9FD;

        border: 1px solid $search-border-color;
        border-radius: 4px;

        padding: 10px 16px;

        transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;

        &:focus, &:focus-visible {
            box-shadow: 0 0 0 4px rgba($search-box-shadow-color-focus, 25%);

            background-color: $search-background-color-focus;

            border-color: $search-border-color-focus;
            outline: 0;
        }
    }

    .icon-picker-modal__footer {
        .picker-save {
            font-family: $font-family;
            color: #FFF;

            background-color: #0983FD;

            border-radius: 4px;

            padding: 8px 16px;

            transition: background-color .3s ease;

            &:hover {
                background-color: #0A72CC;
            }
        }
    }
}

@import '../base';