@use '../styles/fonts';

.mio-form-select {
    &-wrapper {
        // height: 100%;
        // overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    &-options-wrapper {
        // max-height: 500px;
        // height: 100%;
        flex: 1;
        overflow-y: auto;
    }

    &-option {
        padding: 3px 5px;
        cursor: pointer;

        &:hover {
            background-color: color-mix(in srgb, var(--bg-pri), var(--bg-pri-opposite) 10%)
        }

        &-selected {
            background-color: var(--btn-bg-blu);
            color: var(--btn-fg-blu);

            &:hover {
                background-color: color-mix(in srgb, var(--btn-bg-blu), var(--bg-pri-opposite) 10%)
            }
        }
    }


    &-search {

        &-input {
            height: var(--input-size);
            padding-left: 5px;
        }

        &-wrapper {
            background-color: var(--bg-sec);
        }
    }
}