/*
Select

Example: Default
    <label class="select">
        <select aria-label="Kategori">
            <option>alle tema</option>
            <option>arbeid og næring</option>
            <option>...</option>
        </select>
    </label>

Example: Block

    <label class="select  select--block">
        <select aria-label="Kategori">
            <option>alle tema</option>
            <option>arbeid og næring</option>
            <option>...</option>
        </select>
    </label>
    <p class="help-text">I am a help text</p>

Example: Outlined
    <label class="select  select--outlined">
        <select aria-label="Kategori">
            <option>alle tema</option>
            <option>arbeid og næring</option>
            <option>...</option>
        </select>
    </label>

Example: Light
    <label class="select  select--light">
        <select aria-label="Kategori">
            <option>alle tema</option>
            <option>arbeid og næring</option>
            <option>...</option>
        </select>
    </label>

Example: Adaptable
    <p>
        I adapt:
        <label class="select">
            <select select-autowidth aria-label="Kategori">
                <option>alle tema</option>
                <option>arbeid og næring</option>
                <option>...</option>
            </select>
        </label>
        ...OMG!
    </p>

Styleguide form.5:select
*/

.select {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0;

    border-bottom: $border-width solid color(primary);
    // margin-top: -1px;
    // margin-bottom: -($border-width);

    select {
        @include font(base, bold);
        font-size: inherit;
        line-height: 1;

        // Reset
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        display: inline-block;
        cursor: pointer;
        margin: 0;

        padding: $unit 0;
        padding-right: 22px;

        max-width: 100%;
        border-radius: 0;
        border: 0;

        color: $color-text;
        background-color: transparent;

        will-change: width;
        transition: width 100ms $swift-out;

        &:focus:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 #000;
        }

        &::-ms-expand {
            // Hide the arrow in IE10 and up
            display: none;
        }

        option {
            @include font(base, normal);
        }
    }

    &:before {
        @extend %icon-chevron-down;
        content: '';
        position: absolute;
        display: block;
        pointer-events: none;
        top: 50%;
        right: 1px; // Optical aligning
        margin-top: -4px;
    }

    &--block {
        display: block;

        select {
            display: block;
            width: 100%;
        }
    }

    &--light {
        color: $color-light;
        border-color: $color-light;

        &:before {
            @extend %icon-chevron-down--light;
        }

        select {
            color: $color-light;

            &:focus {
                color: $color-text;
            }
        }
    }

    &--outlined {
        border-radius: $border-radius;
        border: $border-width solid color(neutral, light);
        background-color: $color-light;

        &:before {
            right: $spacing--small;
        }

        select {
            @include font(base, normal);
            @include font-size(small);
            padding: #{$unit + $border-width} #{$spacing--small + $border-width};
            padding-right: 34px;
        }
    }

    &--small {
        width: $input-small;
    }

    &--block {
        display: block;
        margin-bottom: $unit;
    }
}

// Media query to target Firefox only
@-moz-document url-prefix() {
    // Firefox hack to hide the arrow
    .select {
        select {
            text-indent: 0.01px;
            text-overflow: '';
        }

        &:after {
            content: '';
            position: absolute;
            pointer-events: none;
            right: 0;
            top: 0;
            width: 40px;
            height: 100%;
            background-color: $color-background;
        }

        &:before {
            z-index: 2;
        }

        // <option> elements inherit styles from <select>, so reset them.
        option {
            background-color: white;
        }
    }
}
