@import 'fields.date';

.field
{
    @include clear-inside;

    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: steps(3);

    font-size: inherit;
    line-height: inherit;

    > .label,
    > .value
    {
        display: block;

        color: $color-text-darker;
    }

    > .label
    {
        @include baseline-box(16px, steps(2.5), 0.5px, 0, steps(0.5));

        font-weight: bold;
    }

    > .value
    {
        @include baseline-box(16px, steps(2.5), 0.5px);

        b
        {
            color: $color-brand-darker;
        }
    }

    &.with-description
    {
        @include for-at-least-normal-tablets
        {
            .control,
            .description
            {
                float: left;
            }

            .control
            {
                margin-right: steps(2);
            }
        }
    }

    .description
    {
        @include small-text(steps(1));

        display: block;
    }

    &.with-joint
    {
        @include for-at-least-normal-tablets
        {
            .control,
            .joint
            {
                display: inline-block;

                margin-right: steps(1.5);
            }
        }
    }

    .joint
    {
        @include baseline-box(16px, steps(2.5), 0.5px, steps(0.5));

        display: block;
    }

    .actions
    {
        @include baseline-box(16px, steps(2.5), 0.5px, steps(1));

        display: block;

        button:not(:last-child)
        {
            margin-right: steps(1.5);
        }
    }

    &.has-error
    {
        .control
        {
            #{$input-elements},
            &.date #{$input-elements},
            &.time #{$input-elements},
            &.text #{$input-elements},
            &.number #{$input-elements},
            &.tel #{$input-elements},
            &.email #{$input-elements}
            {
                &,
                &:hover,
                &:focus
                {
                    &,
                    + .unit
                    {
                        border-color: $color-alert;
                    }
                }
                &:hover,
                &:focus
                {
                    &,
                    + .unit
                    {
                        box-shadow: inset 0 -0.5px 0 0 $color-alert;
                    }
                }
            }

            &.checkbox input + label::before
            {
                border-color: $color-alert;
            }

            &.checkbox input.bordered + label::before
            {
                box-shadow: 0 0 0 1px $color-alert;
            }
        }
    }

    .error
    {
        @include baseline-box(14px, steps(2.5), 0.6px, steps(1));

        clear: both;
        display: block;
        margin-bottom: steps(-1);

        color: $color-alert;
    }

    &.disabled
    {
        $color-disabled: $color-text-lightest;

        > .label
        {
            color: $color-disabled;
        }

        .description
        {
            color: $color-disabled;
        }

        .control
        {
            #{$input-elements},
            &.date #{$input-elements},
            &.time #{$input-elements},
            &.text #{$input-elements},
            &.number #{$input-elements},
            &.tel #{$input-elements},
            &.email #{$input-elements}
            {
                color: $color-disabled;

                &,
                + .unit
                {
                    border-color: $color-disabled;

                    &:focus,
                    &:hover
                    {
                        &,
                        & + .unit
                        {
                            box-shadow: none;
                        }
                    }
                }
            }

            &::after
            {
                opacity: 0.3;
            }

            .unit
            {
                color: $color-disabled;
            }
        }
    }

    .group
    {
        display: block;
        margin: steps(-1);

        .control
        {
            margin: steps(1);

            @include for-at-least-tablets
            {
                display: inline-block;
                width: steps(17);

                vertical-align: top;
            }
        }
    }
}

.field .control
{
    @include font-dimensions(16px, steps(3), 0.7px);

    display: block;
    height: steps(5);

    @include for-at-least-tablets
    {
        width: steps(26);
    }

    #{$input-elements}
    {
        @include transition;

        width: 100%;
        height: 100%;
        padding: 9px 20px;
        border: 1px solid $color-border-normal;

        // workaround for ie10 long text overflowing padding
        .ie &
        {
            border-radius: .1px;
        }

        color: $color-text-darker;
        background: $color-background-lightest;

        &:hover,
        &:focus
        {
            &,
            + .unit
            {
                border-color: $color-border-darker;
            }
        }
    }

    &.long-description
    {
        width: auto;
        height: auto;
        flex: 1;
    }

    &.counter
    {
        position: relative;
        padding-left: steps(5);
        padding-right: steps(5);

        @include button-shadow;
        border-radius: 25px;

        @include for-at-least-tablets
        {
            width: steps(15);
        }

        .increment,
        .decrement
        {
            position: absolute;
            top: 0;

            width: steps(5);
            height: steps(5);
            padding: 0;
            box-shadow: none;

            color: $color-link-normal;
            background: $color-background-normal;

            &:hover
            {
                background: $color-background-lightest;
            }

            &::after
            {
                display: block;
                width: steps(2);
                height: steps(2);
                font-size: 24px;
            }
        }

        .increment
        {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            right: 0;
            border-left: none;

            &::after
            {
                margin-left: steps(1.3);
                content: "+";
            }
        }

        .decrement
        {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            left: 0;
            border-right: none;

            &:after
            {
                margin-left: steps(1.9);
                content: "-";
            }
        }

        input
        {
            text-align: center;
            max-width: steps(10);
            border: none;

            @include for-at-least-tablets
            {
                padding-left: steps(1);
                padding-right: steps(1);
            }
        }
    }

    &.radio,
    &.checkbox,
    &.file,
    &.textarea,
    &.pushbutton
    {
        width: auto;
        height: auto;
    }

    &.radio,
    &.checkbox,
    &.file
    {
        input
        {
            width: auto;
            height: auto;
            padding: 0;
            border: 0;

            background: none;
        }
    }

    &.date
    {
        @include input-icon("calendar");

        width: steps(22);

        input
        {
            color: $color-text-darker;
            font-weight: bold;

            &::placeholder
            {
                opacity: 1;
            }
        }

        &::after
        {
            margin-top: -1px; // fine-tune icon position
        }
    }

    &.date,
    &.time,
    &.text,
    &.number,
    &.tel,
    &.email,
    &.underlined
    {
        input,
        input + .unit,
        select
        {
            border: none;
            border-bottom: 2px solid $color-border-darkest;
            transition-property: box-shadow;

            &:focus,
            &:hover
            {
                &,
                & + .unit
                {
                    box-shadow: inset 0 -0.5px 0 0 $color-border-darkest;
                    outline: none;
                }
            }
        }

    }

    &.time
    {
        @include input-icon("clock");

        width: steps(18);
    }

    &.radio
    {
        @include for-phones
        {
            display: flex;
            flex-wrap: wrap;
        }

        @include for-at-least-tablets
        {
            margin-top: steps(-1);
            margin-bottom: steps(-1);
        }

        .option
        {
            display: inline-block;
            margin-top: steps(1);
            margin-bottom: steps(1);

            @include for-phones
            {
                flex-grow: 1;
            }

            @include for-at-least-tablets
            {
                &:not(:last-child)
                {
                    margin-right: 1px;
                }
            }
        }

        input
        {
            @include visually-hidden;
            @include focus-outline;

            &:checked + label
            {
                color: $color-text-inverted-lighter;
                background: $color-background-inverted-normal;
            }
        }

        label
        {
            // macos antialiasing should be enabled only for _checked_ option label which has dark background,
            // but since firefox quantum does not repaint antialiasing when checking other options,
            // enable it for all option labels
            @include antialiasing;

            @include transition;
            @include baseline-box(16px, steps(2), 0.9px, steps(1.5) - 1px, steps(1.5) - 1px);

            display: block;
            min-width: steps(7);
            padding-left: steps(2);
            padding-right: steps(2);
            box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.22);

            background: $color-background-lightest;
            text-align: center;
            cursor: pointer;

            color: $color-text-darker;

            &:hover
            {
                background: $color-background-lightest;
            }

            &.round-left-corners
            {
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
            }

            &.round-right-corners
            {
                border-top-right-radius: 25px;
                border-bottom-right-radius: 25px;
            }
        }
    }

    &.checkbox
    {
        @include alternative-text;

        margin-bottom: steps(-1);

        input
        {
            @include visually-hidden;
            @include focus-outline("::before");

            + label
            {
                display: inline-block;
                padding-left: steps(3.5);

                &::before
                {
                    content: "";

                    box-sizing: border-box;
                    display: inline-block;
                    overflow: hidden;
                    width: steps(1.4);
                    height: steps(1.4);
                    border: 3px solid $color-background-lightest;
                    border-radius: 7px;
                    margin-right: steps(1.5);
                    margin-left: steps(-3.5);

                    line-height: steps(2) - 2px;
                    background: $color-background-lightest;
                    text-align: center;
                    vertical-align: middle;
                }
            }

            &:checked + label::before
            {
                background-color: $color-link-normal;
            }

            &.bordered + label::before
            {
                box-shadow: 0 0 0 1px $color-border-darkest;
            }
        }
    }

    &.select
    {
        // custom dropdown arrow
        // firefox will remove default dropdown arrow with `-moz-appearance: none` since v35
        @include select-icon;

        select
        {
            position: relative;

            -webkit-appearance: none;
               -moz-appearance: none;

            &::-ms-expand
            {
        		display: none;
        	}
        }

        // kinda workaround to style `select` placeholder
        select:invalid,
        option:disabled
        {
            // try to match `input` placeholder color
            color: lighten($color-text-darker, 37.2%);
        }

        option
        {
            color: $color-text-darker;
        }
    }

    &.textarea
    {
        textarea
        {
            display: block;
            min-height: steps(16);
            max-height: steps(44);
        }
    }

    &.file
    {
        @include small-text;

        display: inline-block;

        input
        {
            overflow: hidden;
            width: 100%;
        }
    }

    &.with-unit
    {
        display: flex;

        input
        {
            flex: 1 1;
            min-width: 0;
            border-right: 0;
        }

        .unit
        {
            display: inline-block;
        }
    }

    &.uppercased
    {
        #{$input-elements}
        {
            text-transform: uppercase;
        }
    }

    .unit
    {
        @include transition;

        display: none;
        padding: 9px 20px 9px 0;
        border: 1px solid $color-border-normal;
        border-left: 0;

        color: $color-text-lighter;
        background: $color-background-lightest;

        cursor: text;
        white-space: nowrap;
    }
}

// reset for mobile safari
#{$input-elements}
{
    -webkit-appearance: none;
    border-radius: 0;
}

// normalize placeholder
input
{
    @include placeholder
    {
        color: inherit;
        opacity: 0.54;
    }

    // cat't use `opacity` as ie puts it to input itself
    // so using `rgba` to achieve same effect
    &:-ms-input-placeholder
    {
        color: create-rgba($color-text-darker, 0.54) !important;
    }
}

textarea
{
    resize: vertical;
}

// hide input clear button for ie/edge
input::-ms-clear
{
    display: none;
}

// hide spin buttons for webkit, e.g. for date, time, month, number inputs
input::-webkit-inner-spin-button
{
    display: none;
}

// hide spin buttons for firefox
input[type="number"]
{
    -moz-appearance: textfield;
}
