@use "../../../bulma/sass/utilities" as bulma-utilities;

.select {
    select {
        padding-right: 2.5em;

        // TODO Remove below when the following problem will be fixed from Bulma or Safari:
        // https://github.com/jgthms/bulma/issues/2626
        // https://bugs.webkit.org/show_bug.cgi?id=202055
        text-rendering: auto !important;

        option {
            padding: var(--control-padding-vertical) var(--control-padding-horizontal);
            color: var(--grey-dark);

            &:disabled {
                color: var(--grey-light);
                cursor: not-allowed;
                opacity: 0.5;
            }
        }

        optgroup {
            padding: 0.25em 0;
            font-style: normal;
            font-weight: var(--weight-normal);
            color: var(--grey-lighter);
        }

        &[disabled] {
            // Chrome add `opacity: 0.7` on disabled select, but not on disabled input fields.
            // every disabled fields now have the same look.
            opacity: 1;
        }
    }

    &.is-empty select {
        color: var(--grey-light);
    }

    // fix Bulma 0.8.2
    &.is-loading::after {
        top: calc(50% - (1em * 0.5));
        right: calc((2.5em * 0.5) - .5em);
    }
}