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

@import "../common";

@include export("input") {
    #{$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: $align-opposite-direction;

            .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;
            z-index: 5;

            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; }
            }
        }
    }
}