// @import "../core/core";

@mixin _dc-input {
    margin-bottom: $dc-space150;
    padding: $dc-space75 + .1 $dc-space75;
    transition: box-shadow .2s linear, border-color .2s linear;
    border: 1px solid $dc-gray60;
    border-radius: $dc-radius100;
    font-size: $dc-font100;
    font-weight: $dc-normal-font-weight;
    box-shadow: inset 0 1px 1px rgba($dc-black, 0);
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba($dc-black, 0);

    &:hover {
        border-color: $dc-blue40;
    }

    &:focus {
        border-color: $dc-blue40;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba($dc-black, .2);
    }

    &[disabled] {
        border-color: $dc-gray70;
        background-color: $dc-gray80;
        color: $dc-gray50;

        // scss-lint:disable VendorPrefix
        &::-webkit-input-placeholder {
            color: $dc-gray60;
            font-weight: $dc-normal-font-weight;
        }

        &:-moz-placeholder {
            color: $dc-gray60;
            font-weight: $dc-normal-font-weight;
        }

        &::-moz-placeholder {
            color: $dc-gray60;
            font-weight: $dc-normal-font-weight;
        }

        &:-ms-input-placeholder {
            color: $dc-gray60;
            font-weight: $dc-normal-font-weight;
        }
        // scss-lint:enable VendorPrefix
    }
}

@mixin dc-input {
    @include _dc-input;
}

%dc-input {
    @include dc-input;
}

@mixin dc-input--block {
    display: inline-block;
    width: 100%;
}

@mixin dc-input--is-error {
    border-color: $dc-red40;

    &:hover,
    &:focus {
        border-color: $dc-red40;
    }
}

@mixin dc-input--text-right {
    text-align: right;

    // scss-lint:disable VendorPrefix
    &::-webkit-input-placeholder {
        text-align: right;
    }

    &:-moz-placeholder {
        text-align: right;
    }

    &::-moz-placeholder {
        text-align: right;
    }

    &:-ms-input-placeholder {
        text-align: right;
    }
    // scss-lint:enable VendorPrefix
}

@mixin dc-input--small {
    height: $dc-space150;
    font-size: $dc-font50;
}

//  = INPUTS
//  ---------------------------------------------------------------------------
@mixin dc-input-selectors {

    .dc-input {
        @include dc-input;
    }

    .dc-input--block {
        @include dc-input--block;
    }

    .dc-input--is-error {
        @include dc-input--is-error;
    }

    .dc-input--text-right {
        @include dc-input--text-right;
    }

    .dc-input--small {
        @include dc-input--small;
    }
}