/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

.#{$vendor-prefix}custom-input {
    @include reset-inline-block;
}

// Checkbox, radio
.#{$vendor-prefix}custom-input {
    .#{$vendor-prefix}checkbox,
    .#{$vendor-prefix}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; }
    }

    .#{$vendor-prefix}radio { border-radius: 50%; }

    input {
        display: none;

        // Style when the associated label is being hovered
        &:hover + .#{$vendor-prefix}checkbox,
        &:hover + .#{$vendor-prefix}radio {
            border-color: $gray-darkest;
        }

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

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

// Select
.#{$vendor-prefix}custom-input {
    .#{$vendor-prefix}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;

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

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

    .#{$vendor-prefix}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 + .#{$vendor-prefix}select {
            border-color: $gray-darkest;
        }

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

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

            .#{$vendor-prefix}select-arrow { opacity: $default-opacity; }
        }
    }

    // Select dropdown
    .#{$vendor-prefix}select-options {
        max-height: 300px;
        overflow: auto;

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

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

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