@charset "UTF-8";

@import "variables";
@import "mixin";

@mixin input($borderColor: #ddd, $focus: #ff0000) {
    .input {
        @include inline-block;

        border: 1px $borderColor solid;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05) inset;
        vertical-align: middle;
        color: $gray;

        // &:focus {
        //     border-color: $focus;
        // }
   
    }
}

@mixin inputSize($type, $width: 55, $height: 28) {
    .input-#{$type} {
        width: $width * 1px - 12;
        line-height: 20px;
        height: 20px;

        $paddingValue: ($height - 22px) / 2;

        padding: $paddingValue 5px;
    }

    .input-select {
        @include background-img("select", "png", right center);
    }
}

@mixin select($borderColor: #ddd, $focus: #ff0000) {
    .select {
        @include inline-block;

        border: 1px $borderColor solid;

        //box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05) inset;
        vertical-align: middle;
        color: $grayLight;

        // &:focus {
        //     border-color: $focus;
        // }
   
    }
}

@mixin selectSize($type, $width: 55, $height: 28) {
    .select-#{$type} {
        width: $width * 1px - 12;
        line-height: 20px;
        height: 20px;

        $paddingValue: ($height - 22px) / 2;

        padding: $paddingValue 5px;
    }
}

@mixin textareaSize($type, $width: 300, $height: 100) {
    .textarea-#{$type} {
        width: $width * 1px - 12;
        line-height: 20px;
        height: $height * 1px;
        padding: $formPadding;
    }
}

@mixin inputGroup($space: 5px) {
    .input-button, .input-button-space {
        font-size: 0;

        @include inline-block;

        vertical-align: middle;
    }

    @if $space > 0 {
        .input-button-space {
            .btn {
                margin-left: $space;
            }
        }
    }
    @else {
        .input-button {
            .btn {
                border-left: 0;
            }
        }
    }
}