// Barvy formulare - verejne promenne, prepsat lze:
//   - globalne na :root / html / body nebo na tride tematu (kalendar flatpickru, colorpicker a popupy
//     joditu jsou v overlay / primo pod body)
//   - pro vsechny formulare na selektoru .es-form
//   - pro jeden formular na jeho predkovi nebo primo na es-form
// Lokalni obal stranky NEFUNGUJE pro casti v overlay - nejsou v DOM jeho potomkem.
// Soubor je globalni (import pres styles.scss), styly miri i do DOM cizich knihoven.
//
//   --eurosat-form-background-card            pozadi skupiny, kalendare, colorpickeru, panelu selectu, lisy uploadu
//   --eurosat-form-background                 pozadi colorpickeru, vyhledavani v selectu, slideru, editoru
//   --eurosat-form-background-hover           hover tlacitek v jodit liste
//   --eurosat-form-background-app-bar         lista a popupy joditu a quillu
//   --eurosat-form-background-status-bar      ramecek skupiny
//   --eurosat-form-text                       text
//   --eurosat-form-secondary-text             popisek, dny mimo mesic, stupnice slideru
//   --eurosat-form-disabled-text              zakazany colorpicker, znacky a ramecek slideru
//   --eurosat-form-hint-text                  hover ikon v liste joditu a quillu
//   --eurosat-form-divider                    hover v kalendari
//   --eurosat-form-underline                  podtrzeni colorpickeru, ramecky quillu
//   --eurosat-form-icon                       ikony v liste joditu a quillu
//   --eurosat-form-disabled-button            oddelovac tlacitek dnes / potvrdit v kalendari
//   --eurosat-form-elevation                  hover dnu mimo mesic
//   --eurosat-form-primary                    nazev skupiny, fokus, propojeni slideru, drag & drop
//   --eurosat-form-primary-100                pozadi pri drag & drop uploadu
//   --eurosat-form-primary-200                lista pri drag & drop uploadu
//   --eurosat-form-accent                     vybrany button-toggle, den, tlacitka, tahlo slideru
//   --eurosat-form-accent-text                text na accentu (vybrany button-toggle, tlacitka, ikona v liste)
//   --eurosat-form-warn                       chyby colorpickeru
//
// Fallback: --eurosat-form-* -> --eurosat-* -> token Materialu -> pevna barva
//   mat.get-color-from-palette($background, card)                --eurosat-background-card
//   mat.get-color-from-palette($background, background)          --eurosat-background
//   mat.get-color-from-palette($background, hover)               --eurosat-background-hover
//   mat.get-color-from-palette($background, app-bar)             --eurosat-background-app-bar
//   mat.get-color-from-palette($background, status-bar)          --eurosat-background-status-bar
//   mat.get-color-from-palette($foreground, text)                --eurosat-background-card-text
//   mat.get-color-from-palette($foreground, secondary-text)      --eurosat-secondary-text
//   mat.get-color-from-palette($foreground, disabled-text)       --eurosat-disabled-text
//   mat.get-color-from-palette($foreground, hint-text)           --eurosat-hint-text
//   mat.get-color-from-palette($foreground, divider)             --eurosat-divider
//   mat.get-color-from-palette($foreground, divider, .42)        --eurosat-underline
//   mat.get-color-from-palette($foreground, icon)                --eurosat-foreground-icon
//   mat.get-color-from-palette($foreground, disabled-button)     --eurosat-disabled-button
//   mat.get-color-from-palette($foreground, elevation)           --eurosat-elevation
//   mat.get-color-from-palette($primary)                         --eurosat-primary
//   mat.get-color-from-palette($primary, 100)                    --eurosat-primary-100
//   mat.get-color-from-palette($primary, 200)                    --eurosat-primary-200
//   mat.get-color-from-palette($accent)                          --eurosat-accent
//   mat.get-contrast-color-from-palette($accent, 500)            --eurosat-accent-text
//   mat.get-color-from-palette($warn)                            --eurosat-warn
// Status-bar, elevation a odstiny 100/200 Material jako token nema - status-bar a primary-100/200
// ma aplikace nastavit (jinak pevna barva / dopocet z primary).
//
// Interni --_es-form-* se na korenech jen pocitaji z verejnych, zvenku se neprepisuji.
.es-form,
.flatpickr-calendar,
.form-colorpicker,
.md2-colorpicker-content,
.draggable-list-container,
.control-panel,
.form-upload,
.form-upload-image,
.jodit_theme_es,
.quill,
.form-select-control-option,
.mat-mdc-optgroup-label {
    --_es-form-background-card:             var(--eurosat-form-background-card,             var(--eurosat-background-card,          var(--mdc-elevated-card-container-color, whitesmoke)));
    --_es-form-background:                  var(--eurosat-form-background,                  var(--eurosat-background,               var(--mat-app-background-color, white)));
    --_es-form-background-hover:            var(--eurosat-form-background-hover,            var(--eurosat-background-hover,         var(--mat-expansion-header-hover-state-layer-color, rgba(0, 0, 0, .04))));
    --_es-form-background-app-bar:          var(--eurosat-form-background-app-bar,          var(--eurosat-background-app-bar,       var(--mat-toolbar-container-background-color, #f5f5f5)));
    --_es-form-background-status-bar:       var(--eurosat-form-background-status-bar,       var(--eurosat-background-status-bar,    #e0e0e0));
    --_es-form-text:                        var(--eurosat-form-text,                        var(--eurosat-background-card-text,     var(--mat-app-text-color, black)));
    --_es-form-secondary-text:              var(--eurosat-form-secondary-text,              var(--eurosat-secondary-text,           var(--mat-expansion-header-description-color, rgba(0, 0, 0, .54))));
    --_es-form-disabled-text:               var(--eurosat-form-disabled-text,               var(--eurosat-disabled-text,            var(--mat-checkbox-disabled-label-color, rgba(0, 0, 0, .38))));
    --_es-form-hint-text:                   var(--eurosat-form-hint-text,                   var(--eurosat-hint-text,                var(--mat-datepicker-calendar-date-today-outline-color, rgba(0, 0, 0, .38))));
    --_es-form-divider:                     var(--eurosat-form-divider,                     var(--eurosat-divider,                  var(--mat-divider-color, rgba(0, 0, 0, .12))));
    --_es-form-underline:                   var(--eurosat-form-underline,                   var(--eurosat-underline,                var(--mdc-filled-text-field-active-indicator-color, rgba(0, 0, 0, .42))));
    --_es-form-icon:                        var(--eurosat-form-icon,                        var(--eurosat-foreground-icon,          var(--mat-datepicker-toggle-icon-color, rgba(0, 0, 0, .54))));
    --_es-form-disabled-button:             var(--eurosat-form-disabled-button,             var(--eurosat-disabled-button,          var(--mat-standard-button-toggle-disabled-state-text-color, rgba(0, 0, 0, .26))));
    --_es-form-elevation:                   var(--eurosat-form-elevation,                   var(--eurosat-elevation,                black));
    --_es-form-primary:                     var(--eurosat-form-primary,                     var(--eurosat-primary,                  var(--mdc-circular-progress-active-indicator-color, #3f51b5)));
    --_es-form-primary-100:                 var(--eurosat-form-primary-100,                 var(--eurosat-primary-100,              color-mix(in srgb, var(--_es-form-primary) 30%, white)));
    --_es-form-primary-200:                 var(--eurosat-form-primary-200,                 var(--eurosat-primary-200,              color-mix(in srgb, var(--_es-form-primary) 50%, white)));
    --_es-form-accent:                      var(--eurosat-form-accent,                      var(--eurosat-accent,                   var(--mdc-checkbox-selected-icon-color, #ff4081)));
    --_es-form-accent-text:                 var(--eurosat-form-accent-text,                 var(--eurosat-accent-text,              var(--mdc-checkbox-selected-checkmark-color, white)));
    --_es-form-warn:                        var(--eurosat-form-warn,                        var(--eurosat-warn,                     var(--mat-form-field-error-text-color, #f44336)));
}


// es-form

.es-form {
    .form-group {
        background-color: var(--_es-form-background-card);
        border: 1px solid var(--_es-form-background-status-bar);
        color: var(--_es-form-text);
    }

    .group-name {
        color: var(--_es-form-primary);
    }

    .error-messages {
        color: red;
    }

    .mat-select-search-inner {
        background: var(--_es-form-background) !important;
    }

    .mat-custom-label {
        color: var(--_es-form-secondary-text);
    }

    .mdc-text-field--filled:not(.mdc-text-field--disabled) {
        background-color: transparent;

        &:hover {
            background-color: transparent;
        }
    }
}

.form-select-control-option,
.mat-mdc-optgroup-label {
    color: var(--mat-option-label-text-color);
    &:hover {
        background-color: var(--mat-option-hover-state-layer-color);
    }
}


// form-select

.control-panel {
    background: var(--_es-form-background-card);
}


// form-button-toggle

.es-form {
    .mat-button-toggle-checked {
        background-color: var(--_es-form-accent);
        color: var(--_es-form-accent-text);     // drive $background raised-button - v tmavem tematu #424242 na accentu, necitelne
    }
}


// md2-colorpicker - puvodni colorpicker, zadna sablona ho uz nepouziva (zachovano z theme mixinu)

.md2-colorpicker-content {
    .md2-colorpicker-wrapper {
        background-color: var(--_es-form-background);
    }

    .md2-color-picker-actions {
        .md2-button {
            color: var(--_es-form-accent-text);
            background-color: var(--_es-form-accent);
            &:hover {
                color: var(--_es-form-accent-text);
                background-color: var(--_es-form-accent);
            }
        }
    }
}

.es-form {
    .form-error {
        color: var(--_es-form-warn);
    }

    .md2-colorpicker-disabled {
        .color-picker-selector .md2-colorpicker-value {
            color: var(--_es-form-disabled-text);
            border-color: transparent;
        }
    }

    .md2-colorpicker-input {
        border-bottom: 1px solid var(--_es-form-underline);
        color: var(--_es-form-primary) !important;

        input {
            color: var(--_es-form-text);
        }

        md2-colorpicker:focus:not(.md2-colorpicker-disabled) & {
            color: var(--_es-form-primary) !important;
            border-color: var(--_es-form-primary) !important;
        }

        md2-colorpicker.ng-invalid.ng-touched:not(.md2-colorpicker-disabled) & {
            color: var(--_es-form-warn) !important;
            border-color: var(--_es-form-warn) !important;
        }
    }

    .input-focused {
        border-bottom: 2px solid var(--_es-form-primary);
    }

    .md2-colorpicker-placeholder {
        color: var(--_es-form-underline);
    }

    .md2-colorpicker-input.input-focused .md2-colorpicker-placeholder {
        color: var(--_es-form-primary) !important;
    }

    .color-error {
        .md2-colorpicker-input, .md2-colorpicker-placeholder {
            color: var(--_es-form-warn) !important;
            border-color: var(--_es-form-warn) !important;
        }

        .color-fill {
            background-color: transparent !important;
        }
    }

    .color-clear {
        color: rgba(black, .4);
    }
}


// form-colorpicker - chrome-picker z @iplab/ngx-color-picker (ma napevno bile pozadi a sede ramecky)

.form-colorpicker {
    .color-square {
        border-color: var(--_es-form-underline);
    }

    .picker {
        background-color: var(--_es-form-background-card);
        color: var(--_es-form-text);

        chrome-picker {
            background: transparent;
        }

        hex-input-component,
        rgba-input-component,
        hsla-input-component {
            color: var(--_es-form-secondary-text);
        }

        input {
            background-color: transparent;
            border-color: var(--_es-form-underline);
            color: var(--_es-form-text);

            &:focus {
                border-color: var(--_es-form-primary);
            }
        }

        indicator-component {
            border-color: var(--_es-form-divider);
        }

        .type-btn {
            background: var(--_es-form-icon);

            &:hover {
                background: var(--_es-form-text);
            }
        }

        color-presets-component {
            border-top-color: var(--_es-form-divider);
        }

        .discard {
            color: var(--_es-form-icon);
        }

        .apply {
            color: var(--_es-form-primary);
        }
    }
}


// form-draggable-list

.draggable-list-container {
    .item-box {
        color: var(--_es-form-text);
    }
}


// form-flatpickr, form-range-flatpicker

.flatpickr-calendar {
    background-color: var(--_es-form-background-card);
    color: var(--_es-form-text);
}

.flatpickr-day {
    color: var(--_es-form-text);
}
.flatpickr-day:hover {
    background-color: var(--_es-form-divider);
}

.flatpickr-time .numInputWrapper span.arrowUp::after,
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--_es-form-text);
}
.flatpickr-time .numInputWrapper span.arrowDown::after,
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
    border-top-color: var(--_es-form-text);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background-color: var(--_es-form-accent);
    border-color: var(--_es-form-accent);
}

.prevMonthDay, .nextMonthDay {
    color: var(--_es-form-secondary-text) !important;
}

.prevMonthDay:hover, .nextMonthDay:hover {
    color: var(--_es-form-elevation) !important;
}

.flatpickr-weekday {
    color: var(--_es-form-text) !important;
}

.flatpickr-prev-month, .flatpickr-next-month {
    color: var(--_es-form-text) !important;
}
.flatpickr-current-month {
    color: var(--_es-form-text);
}

.flatpickr-time input, .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    color: var(--_es-form-text) !important;
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
    background-color: var(--_es-form-divider);
}

.flatpickr-today:hover, .flatpickr-confirm:hover {
    background-color: var(--_es-form-divider);
}

.flatpickr-confirm svg {
    fill: var(--_es-form-text);
}

.flatpickr-today-confirm-wrapper {
    border-top: 1px solid var(--_es-form-disabled-button);
}


// form-slider

.es-form {
    .noUi-handle {
        border: 1px solid var(--_es-form-accent);
        background: var(--_es-form-accent);

        &:focus {
            outline: var(--_es-form-primary) auto 5px;
        }
    }

    .noUi-tooltip {
        background: var(--_es-form-background);
        color: var(--_es-form-text);
    }

    .noUi-pips {
        color: var(--_es-form-secondary-text);
    }

    .noUi-marker, .noUi-marker-large, .noUi-marker-sub {
        background: var(--_es-form-disabled-text);
    }

    .noUi-target {
        background: var(--_es-form-background);
        border: 1px solid var(--_es-form-disabled-text);
    }

    .noUi-connect {
        background: var(--_es-form-primary);
    }
}


// form-upload, form-upload-image

.form-upload {
    mat-toolbar {
        background-color: var(--_es-form-background-card);
    }
    .dnd-container {
        border: 2px solid transparent;
        &.drag-over {
            border: 2px solid var(--_es-form-primary);
            background-color: var(--_es-form-primary-100);
            mat-toolbar {
                background-color: var(--_es-form-primary-200);
            }
        }
    }
}

.form-upload-image {
    .dnd-container {
        border: 2px solid transparent;
        &.drag-over {
            border: 2px solid var(--_es-form-primary);
        }
    }
}


// form-wysiwyg-jodit

.jodit_theme_es {
    .jodit-toolbar__box,
    .jodit-status-bar,
    .jodit-ui-separator {
        border-color: var(--_es-form-divider) !important;
    }
    &.jodit-container {
        border-color: color-mix(in srgb, var(--_es-form-background-app-bar) 70%, transparent) !important;
    }
    &.jodit-container:not(.jodit_inline) {
        background-color: var(--_es-form-background-app-bar) !important;
    }
    .jodit-toolbar-editor-collection_mode_horizontal:after {
        background-color: var(--_es-form-divider) !important;
    }
    .jodit-toolbar__box, .jodit-status-bar {
        background-color: var(--_es-form-background-app-bar) !important;
    }
    .jodit-toolbar-button__text, .jodit-ui-button__text, .jodit-drag-and-drop__file-box {
        color: var(--_es-form-text);
    }
    .jodit-ui-button:hover:not([disabled]) .jodit-ui-button__text, .jodit-drag-and-drop__file-box:hover {
        color: var(--_es-form-background-app-bar);
    }
    .jodit-icon, .jodit-toolbar-button__trigger {
        fill: var(--_es-form-icon);
        color: var(--_es-form-icon);
    }
    .jodit-toolbar-button__button:hover:not([disabled]), .jodit-toolbar-button__trigger:hover:not([disabled]) {
        background-color: var(--_es-form-background-hover);
        .jodit-icon, .jodit-toolbar-button__trigger {
            fill: var(--_es-form-hint-text);
            color: var(--_es-form-hint-text);
        }
    }
    .jodit-toolbar-button__button:active:not([disabled]), .jodit-toolbar-button__trigger:active:not([disabled]) {
        background-color: var(--_es-form-accent);
        .jodit-icon, .jodit-toolbar-button__trigger {
            fill: var(--_es-form-accent-text);
            color: var(--_es-form-accent-text);
        }
    }
    .jodit-container {
        background-color: var(--_es-form-background);
    }
    .jodit-workplace {
        background-color: var(--_es-form-background);
        color: var(--_es-form-text);
    }
    .jodit-popup__content {
        background-color: var(--_es-form-background-app-bar);
    }
    .jodit-form__inserter {
        .jodit-form__center {
            color: var(--_es-form-text);
        }
        .jodit_hovered {
            background: var(--_es-form-accent) !important;
            border-color: var(--_es-form-accent) !important;
        }
    }
}


// form-wysiwyg-quill

.quill {
    .ql-container.ql-snow, .ql-toolbar.ql-snow,
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
        border-color: var(--_es-form-underline);
    }
    .ql-toolbar.ql-snow,
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
        background-color: var(--_es-form-background-app-bar);
    }
    .ql-snow .ql-stroke {
        stroke: var(--_es-form-icon);
    }
    .ql-snow .blot-formatter__overlay .ql-stroke {
        stroke: rgba(black, .54);
    }
    .ql-snow .ql-fill {
        fill: var(--_es-form-icon);
    }
    .ql-snow .ql-editor {
        background-color: var(--_es-form-background);
        color: var(--_es-form-text);
    }
    .ql-snow .ql-picker {
        color: var(--_es-form-text);
    }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
        border-color: var(--_es-form-underline);
    }
    .ql-snow .ql-tooltip {
        border-color: var(--_es-form-underline);
        background-color: var(--_es-form-background-app-bar);
        color: var(--_es-form-text);
    }
    .ql-editor.ql-blank::before {
        color: color-mix(in srgb, var(--_es-form-text) 69%, transparent);
    }

    .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus,
    .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active,
    .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active,
    .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
        color: var(--_es-form-hint-text);
    }

    .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke,
    .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
        stroke: var(--_es-form-hint-text);
    }

    .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
        fill: var(--_es-form-hint-text);
    }
}