noydb/oworms-ui

@use '../../../style/colour' as colour;
@use '../../../style/font' as font;
@use '../../../style/mixin' as mxn;

div.select {
    position: relative;
    width: 100%;
    border-radius: 6px;
    background-color: colour.$primary;
    color: #8f9699 !important;
    cursor: pointer;
    padding: .7rem;
    min-width: 160px;

    &.transparent {
        @include mxn.input();
        color: rgba(255, 255, 255, 0.6);
    }

    &.fueled {
        color: #ffffff !important;
    }

    > span.s-title {
        font-size: 1rem;
        font-family: 'roboto-regular', font.$default-font;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    > #options {
        position: absolute;
        left: 0;
        z-index: 1000;
        max-height: 300px;
        min-width: 150px;
        background-color: #252728;
        padding: .5rem;
        margin-top: 8px;
        border-radius: 0 6px 6px 6px;
        overflow-y: scroll;
        @include mxn.transition;
        border-left: 1px solid rgba(255, 255, 255, 0.1);

        &.closed {
            height: 0;
            width: 0;
            overflow-y: hidden;
            padding: 0;
        }

        > .s-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            @include mxn.transition;
            cursor: pointer;
            padding: 1rem;

            &:hover {
                background-color: #4b4242;
            }

            > span {
                cursor: pointer;
            }

            &.selected {
                > span {
                    color: colour.$secondary;
                }
            }
        }
    }
}