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

@import "../common";

.custom-input {
    @include reset-inline-block;
}

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

    .radio { border-radius: 50%; }

    input {
        display: none;

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

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

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

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

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

    .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: 1;
        opacity: 0;
        width: 100%;

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

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

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