/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

#{$input-class} {
    @include reset-inline-block;
}

// Checkbox, radio
#{$input-class} {
    #{$input-class-checkbox},
    #{$input-class-radio} {
        @include reset-inline-block;
        background: $gray-lightest;
        border: 1px solid $gray-dark;
        width: 16px;
        height: 16px;
        top: -3px;
        line-height: 1rem;
        border-radius: $round;

        &:hover { border-color: $gray-darkest; }
    }

    #{$input-class-radio} { border-radius: 50%; }

    input {
        display: none;

        // Style when the checkbox is checked
        &:checked + #{$input-class-checkbox},
        &:checked + #{$input-class-radio} {
            border-color: $info;
            background: $info-light;
        }

        // Style when input is disabled
        &[disabled] + #{$input-class-checkbox},
        &[disabled] + #{$input-class-radio} {
            cursor: not-allowed;
            border-color: $gray;
        }
    }
}

// Select
#{$input-class} {
    #{$input-class-select} {
        @include reset-inline-block;
        cursor: pointer;
        background: $gray-lightest;
        border: 1px solid $gray-dark;
        border-radius: $round;
        white-space: nowrap;
        line-height: 1rem;
        z-index: 3;

        &.is-active {
            border-color: $info;
        }
    }

    #{$input-class-select-label},
    #{$input-class-select-arrow} {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        @include size-medium;
    }

    #{$input-class-select-arrow} {
        float: right;

        .caret-down { border-top-color: #000; }
    }

    // Position the real select over the custom one
    select {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        opacity: 0;
        width: 100%;

        // Style when the select is hovered
        &:hover + #{$input-class-select} {
            border-color: $gray-darkest;
        }

        // Style when the select is focused
        &:focus + #{$input-class-select} {
            border-color: $info;
        }

        // Style when select is disabled
        &[disabled] + #{$input-class-select} {
            cursor: not-allowed;
            color: $gray-darkest;
            border-color: $gray;

            #{$input-class-select-arrow} { opacity: $default-opacity; }
        }
    }

    // Select dropdown
    #{$input-class-select-options} {
        max-height: 300px;
        overflow: auto;

        li.is-disabled {
            > a,
            > a:hover {
                background: none;
                color: $gray-darkest;
                cursor: default;
            }
        }

        &.hide-selected {
            li.is-active { display: none !important; }
        }

        &.hide-first {
            li:first-child:not(#{$drop-class-heading}) { display: none !important; }
        }
    }
}