@import 'uniform/functions/icons';

.uniformSelect{
    --border-color: #{red(color('gray-40'))}, #{green(color('gray-40'))}, #{blue(color('gray-40'))};
    appearance: none;
    outline: none;
    vertical-align: middle;
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas: "value indicator";
    align-items: center;
    padding: 0 0.25em;
    background: white;
    select{
        display: none;
    }
    &.active{
        box-shadow: 0 0 0 2px rgba(var(--focus-color), 1), inset 2px 2px 3px rgba(black, 0.2);
        .uniformSelect-indicator{
            svg{
                transform: rotate(180deg);
            }
        }
    }
    &:focus{
        box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
    }
}

.uniformSelect-placeholder,
.uniformSelect-value {
    grid-area: value;
    white-space: nowrap;
}
.uniformSelect-placeholder{
    opacity: 0;
    user-select: none;
}
.uniformSelect-value{
    z-index: 2;
    text-align: left;
    display:flex;
}
.uniformSelect-indicator{
    padding-left: 0.25em;
    grid-area: indicator;
    svg{
        width: 1.4em;
        transition: transform 0.2s;
    }
}
.uniformSelect-options{
    background: white;
    box-shadow: 0 0 15px 1px rgba(black, 0.2), 0 0 2px 1px rgba(black, 0.1);
    button{
        appearance: none;
        outline: none;
        border: none;
        background: none;
        display: block;
        min-width: 100%;
        padding: 0.5em 1.5em;
        text-align: left;
        position: relative;
        &.hide{
            display: none;
        }
        &:hover{
            background: lighten(color('blue'), 45);
        }
        &.active{
            color: color('blue-60');
            font-weight: bold;
            &:after{
                position: absolute;
                left: 0.25em;
                top: 50%;
                transform: translateY(-50%);
                background-image: icon-check(#{color('blue-40')});
                background-size: contain;
                content: '';
                width: 1em;
                height: 1em;
            }
        }
    }
    .uniformSelect-actions{
        border-top: 1px solid color('gray-20');
        border-bottom: 1px solid color('gray-20');
        background: darken(white, 5);
        padding: 0.5em;
        &:empty{
            display: none;
        }
    }
    .uniformSelect-show-all {
        color: color('blue');
        background: none;
        text-align:center;
        &:hover{
            background: none;
        }
    }
    .uniformSelect-done{
        border-radius: 0.25em;
        border: 1px solid color('gray-20');
        background: white;
        text-align:center;
        background: white;
    }
}

.uniformSelect-selection + .uniformSelect-selection {
    margin-left: 0.5em;
}

.uniformSelect-selection{
    display: inline-flex;
    align-items: center;
    font-size: 0.8em;
    margin: 0.2em 0;
    padding: 0;
    line-height: 1;
    padding-left:0.5em;
    background: color('gray-10');
    border-radius: 0.25em;
    span{
        flex: 1 1 auto;
    }
    .uniformSelect-remove{
        padding: 0.2em;
        flex: 0 1 auto;
        svg {
            width: 0.8em;
            height: auto;
        }
        &:hover{
            fill: color('red');
        }
    }
}