Choices/assets/styles/scss/choices.scss

$global-guttering: 2.4rem;

*, *:before, *:after {
    box-sizing: border-box
}

html {
    font-size: 62.5%;
}

html, body {
    margin: 0;
    height: 100%;
    widows: 100%;
}

body {
    background-color: #333333;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.6rem;
    color: #FFFFFF;
}

label {
    display: block;
    margin-bottom: .8rem;
    font-size: 1.4rem;
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: $global-guttering/2;
    font-weight: 500;
}

.container {
    display: block;
    margin: auto;
    max-width: 35em;
    padding: $global-guttering;
}

.section {
    background-color: #FFFFFF;
    padding: $global-guttering;
    color: #333;
}

.choices {
    margin-bottom: $global-guttering;
    position: relative;
}

.choices__inner {
    background-color: mix(#000000, #FFFFFF, 2.5%);
    padding: .75rem .75rem .375rem;
    border: 1px solid #DDDDDD;
    border-radius: .25rem;
    font-size: 1.4rem;
    cursor: text;
    .is-focused & { border-color: darken(#DDDDDD, 15%); }
    &:focus { 
        outline: 1px solid #00BCD4;
        outline-offset: -1px;
    }
}

.choices__list {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

.choices__list--options {}

.choices__list--single {
    display: inline-block;
    padding: .4rem;
}

.choices__list--multiple {
    display: inline;
    .choices__item {
        display: inline-block;
        border-radius: 2rem;
        padding: .4rem 1rem;
        font-size: 1.2rem;
        margin-right: .375rem;
        margin-bottom: .375rem;
        background-color: #00BCD4;
        border: 1px solid darken(#00BCD4, 2.5%);
        color: #FFFFFF;
        word-break: break-all;
        &.is-selected { background-color: darken(#00BCD4, 5%); }
    }
}

.choices__list--dropdown {
    display: none;
    z-index: 1;
    position: absolute;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    top: 100%;
    margin-top: -1px;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    max-height: 300px;
    overflow: auto;
    will-change: scroll-position;
    .is-open & { border-color: darken(#DDDDDD, 15%); }
    .choices__item {
        padding: 1rem;
        font-size: 1.4rem;
        &.is-selected { 
            opacity: .5; 
            &:hover { background-color: #FFFFFF; }
        }
    }
    .choices__item--selectable {
        &:after {
            content: "Press to select";
            font-size: 12px;
            opacity: 0;
            float: right;
        }
        &.is-highlighted { 
            background-color: mix(#000000, #FFFFFF, 5%); 
            &:after { opacity: .5; }
        }
    }

    &.is-active { display: block; }
    &.is-flipped {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: -1px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }
}

.choices__item { cursor: default; }
.choices__item--selectable { cursor: pointer; }
.choices__item--disabled { 
    cursor: not-allowed; 
    user-select: none;
    opacity: .5;
}

.choices__group {
    .choices__heading { 
        font-weight: 600;
        font-size: 1.2rem;
        padding: 1rem;
        border-bottom: 1px solid #EAEAEA;
        color: lighten(#333, 30%); 
    }
}

.choices__input {
    background-color: mix(#000000, #FFFFFF, 2.5%);
    font-size: 1.4rem;
    padding: 0;
    margin-bottom: .5rem;
    display: inline-block;
    vertical-align: baseline;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: .4rem 0 .4rem .2rem;
    &:focus { outline: 0; }
}