/*
Inputs

Use the class `.input` to add styling to input fields

Example: Standard input
    <label class="label">
        Standard input
        <input type="text" placeholder="I set the standard" class="input" />
    </label>

Example: Error input
    <label class="label">
        I'm a error input!
        <input type="text" placeholder="Omg!" class="input  input--error" />
    </label>

Example: Inline input
    <label class="label">
        Look,
        <input class="input  input--inline" type="text" placeholder="I'm inline!!" />
        Wuut?
    </label>

Example: Outlined input
    <label class="label">
        Outlined input
        <input type="text" placeholder="Look at ma' outlines" class="input  input--outlined" />
    </label>

Example: Smaller input
    <label class="label">
        Small input
        <input type="text" placeholder="I'm tiny!" class="input input--small" />
    </label>

Example: Extra small inline input - suitable for time input and similar
    <label class="label">
        Time:
        <input type="text" placeholder="Hour" class="input input--inline-xxsmall" />
        :
        <input type="text" placeholder="Minute" class="input input--inline-xxsmall" />
    </label>

Example: Standard textarea
    <label class="label">
        I'm a textarea
        <textarea placeholder="I more got space!" class="input"></textarea>
    </label>

Example: Textarea with error
    <label class="label">
        I'm a textarea with error!
        <textarea placeholder="Why? :'('" class="input  input--error"></textarea>
    </label>

Example: Textarea with outlines
    <label class="label">
        I got the outlines!
        <textarea placeholder="Look, outlines!" class="input  input--outlined"></textarea>
    </label>

Example: {type: isolated} Textarea that grows
    <label class="label">
        I'm a textarea that can grow
        <textarea class="input" placeholder="You can type alot on me!" auto-grow></textarea>
    </label>

Styleguide form.3:input
*/

.input {
    @include font(base, normal);
    @include font-size(small, true);
    line-height: 1.6;
    min-height: vertical-space(6);

    display: block;
    width: 100%;
    padding: #{$unit + $border-width} #{$spacing--small + $border-width};

    color: $color-text;

    border-radius: $border-radius;
    border: $border-width solid $color-light;
    background-color: $color-light;
    margin-bottom: $unit;
    outline: none;

    &:focus {
        border-color: color(secondary, dark);
    }

    &[disabled] {
        background-color: color(neutral);
    }

    @include input-placeholder {
        color: tint($color-muted, 20%);
        // color: color(primary);
    }

    &--inline {
        @include font-size(small);
        display: inline-block;
        width: auto;
        min-width: 160px;
        padding: $unit $spacing--small;
        margin: 0;
    }

    &--inline-xxsmall {
        @include font-size(small);
        display: inline-block;
        width: $unit * 16;
        min-width: $unit * 5;
        padding: $unit $spacing--small;
        margin: 0;
    }

    &--half {
        width: calc(50% - #{$spacing--small});
    }

    &--small {
        width: $unit * 36;
    }

    &--xsmall {
        width: $unit * 20;
    }

    &--xxsmall {
        width: $unit * 16;
    }

    &--outlined {
        border: $border-width solid color(neutral, light);
    }

    &--error {
        border-color: color(primary);
    }

    &--nomargin {
        margin: 0;
    }
}
