.form-field {
    outline: none;
    display: block;
    width: 100%;
    -webkit-appearance: none;
    background: $inputBackground;
    border: 1px solid $formBorder;
    padding: $inputPaddingV $inputPaddingH;
    color: $inputText;
    border-radius: $inputRadius;
    @include transition;
    @include placeholder($inputTextPlaceholder);
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        opacity: 1;
        background: $formDisabled;
    }
    &[disabled],
    fieldset[disabled] & {
        cursor: not-allowed;
    }
    &.success {
        border-color: $success;
    }
    &.error {
        border-color: $error;
        &.filled {
            background: rgba($error, .1);
        }
    }
    &:focus {
        outline: none;
        border-color: $formBorderFocus;
        &.filled {
            background: none;
        }
    }
    @if $formOverrideAutofillWebkit == true {
        &:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px $inputBackground inset !important;
            -webkit-text-fill-color: $inputText !important;
        }
    }
}

.form-file-field {
    outline: none;
    display: block;
    width: 100%;
    -webkit-appearance: none;
    position: relative;
    background: $inputBackground;
    border: 1px solid $formBorder;
    padding: $inputPaddingV $inputPaddingH;
    border-radius: $inputRadius;
    white-space: nowrap;
    overflow: hidden;
    @include transition;
    @include clear-after;
    &.focus {
        border-color: $formBorderFocus;
    }
    .file-btn {
        display: inline-block;
        vertical-align: top;
        padding: 0 8px;
        border-radius: $inputRadius;
        background: $inputFileButtonBackground;
        color: $inputFileButtonColor;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        left: -5px;
    }
    .file-msg {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        font-weight: 500;
        color: $inputFileColor;
    }
    &.active {
        .file-msg {
            color: $inputFileColorActive;
        }
    }
    input {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
        &:focus {
            outline: none;
        }
    }
}

textarea {
    &.form-field {
        resize: vertical;
    }
}

.form-element {
    margin-bottom: $formElementBottom;
    label {
        color: $labelColor;
        margin-bottom: $labelBottom;
        font-weight: $labelWeight;
        max-width: 100%;
    }
}

.form-group {
    position: relative;
    width: 100%;
    @include flexbox;
    & > span,
    .form-field,
    .btn {
        white-space: nowrap;
        @include flexbox;
        @include align-items(center);
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
        &:first-child {
            border-radius: $inputRadius 0 0 $inputRadius;
        }
        &:last-child {
            border-radius: 0 $inputRadius $inputRadius 0;
        }
        &:not(:first-child) {
            margin-left: -1px;
        }
    }
    .form-field {
        position: relative;
        z-index: 1;
        width: 1%;
        margin-bottom: 0;
        @include flex(1 1 auto);
    }
    & > span {
        margin-bottom: 0;
        text-align: center;
        border: 1px solid $formBorder;
        padding: $inputPaddingV;
        background: $light;
        @include transition;
    }
    &.focus {
        & > span {
            color: $formFocusColor;
            background: $formFocus;
            border-color: $formBorderFocus;
        }
    }
}

.password {
    position: relative;
    .icon-view {
        position: absolute;
        z-index: 1;
        display: block;
        width: 32px;
        top: 50%;
        text-align: center;
        cursor: pointer;
        background: $inputBackground;
        padding: 5px;
        font-size: 18px;
        margin: -16px 0 0 0;
        color: $formBorder;
        right: ($inputPaddingV - 5);
        @include user-select;
        &:before {
            line-height: 22px;
            display: block;
        }
        &.active {
            color: $formBorderFocus;
        }
    }
}

form {
    &.horizontal {
        .form-element {
            & > label {
                @media(min-width: $breakpointSm) {
                    margin-bottom: 0;
                    padding: $inputPaddingV 0;
                }
            }
            .static {
                margin-bottom: 0;
                @media(min-width: $breakpointSm) {
                    padding: $inputPaddingV 0;
                }
            }
        }
        .checkbox:first-child,
        .checkbox.inline,
        .radio:first-child,
        .radio.inline,
        .switch:first-child,
        .switch.inline {
            padding-top: $inputPaddingV + 2;
        }
    }
}

@keyframes confetti {
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include transform(scale(1) translate(-50%, -50%));
    }
}

.checkbox,
.radio,
.switch {
    margin: 0;
    &.inline {
        margin: 0 12px 0 0;
        display: inline-block;
    }
    & > span {
        margin: 0 0 0 6px;
        vertical-align: top;
    }
    input {
        display: none;
        & + div {
            cursor: pointer;
            vertical-align: top;
            position: relative;
            display: inline-block;
            @include user-select;
            @include transition;
            &:before {
                content: '';
            }
        }
    }
    &.fancy {
        input {
            & + div {
                &:after {
                    content: '';
                    width: 3px;
                    height: 3px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    opacity: 0;
                    border-radius: 50%;
                    @include transform(scale(0) translate(-50%, -50%));
                }
            }
            &:checked + div {
                &:after {
                    animation: confetti .4s cubic-bezier(.17,.67,.82,1.25) forwards;
                }
            }
        }
    }
}

.checkbox {
    & > span {
        line-height: $checkboxSize + 2;
    }
    input {
        & + div {
            height: $checkboxSize;
            width: $checkboxSize;
            background: $checkboxBackground;
            border: 1px solid $checkboxBorder;
            border-radius: $checkboxRadius;
            &:before {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 6px;
                height: 11px;
                margin: -7px 0 0 -3px;
                opacity: 0;
                border-right: 2px solid $checkboxArrow;
                border-bottom: 2px solid $checkboxArrow;
                @include transform(rotate(0deg) scale(0));
                @include transition(all .3s ease .15s);
            }
        }
        &:checked + div {
            background: $checkboxActive;
            border-color: $checkboxBorderActive;
            &:before {
                opacity: 1;
                @include transform(rotate(42deg) scale(1));
                @include transition(all .15s cubic-bezier(.17,.67,.82,1.25) .1s);
            }
        }
        &:disabled + div {
            cursor: not-allowed;
        }
        &:disabled:checked + div {
            background: $checkboxDisabled;
            border-color: $checkboxBorder;
            &:before {
                border-color: $checkboxBorder;
            }
        }
        &:disabled:not(:checked) + div {
            background: $checkboxDisabled;
            border-color: $checkboxBorder;
        }
    }
    &:hover {
        input {
            & + div {
                border-color: $checkboxBorderActive;
            }
            &:checked + div {
                background: $checkboxBorderActive;
            }
            &:disabled:checked + div {
                background: $checkboxDisabled;
            }
        }
    }
    &.fancy {
        input {
            & + div {
                &:after {
                    box-shadow: 0 ($checkboxSize - 4px) 0 $checkboxBorderActive, 0 (-$checkboxSize + 4px) 0 $checkboxBorderActive, (-$checkboxSize + 4px) 0 0 $checkboxBorderActive, ($checkboxSize - 4px) 0 0 $checkboxBorderActive, ($checkboxSize - 10px) ($checkboxSize - 10px) 0 $checkboxBorderActive, (-$checkboxSize + 10px) ($checkboxSize - 10px) 0 $checkboxBorderActive, ($checkboxSize - 10px) (-$checkboxSize + 10px) 0 $checkboxBorderActive, (-$checkboxSize + 10px) (-$checkboxSize + 10px) 0 $checkboxBorderActive;
                }
            }
        }
    }
}

.radio {
    & > span {
        line-height: $radioSize + 2;
    }
    input {
        & + div {
            width: $radioSize;
            height: $radioSize;
            background: $radioBackground;
            border: 1px solid $radioBorder;
            border-radius: $radioRadius;
            &:before {
                position: absolute;
                top: 50%;
                left: 50%;
                display: block;
                width: ($radioSize + 2) / 2;
                height: ($radioSize + 2) / 2;
                margin: (-(($radioSize + 2) / 4)) 0 0 (-(($radioSize + 2) / 4));
                opacity: 0;
                background: $radioDot;
                border-radius: inherit;
                @include transform(scale(0));
                @include transition;
            }
        }
        &:checked + div {
            background: $radioActive;
            border-color: $radioBorderActive;
            &:before {
                opacity: 1;
                @include transform(scale(1));
            }
        }
        &:disabled + div {
            cursor: not-allowed;
            background: $radioDisabled;
            border-color: $radioBorder;
        }
        &:disabled:checked + div {
            &:before {
                background: $radioBorder;
            }
        }
    }
    &:hover {
        input {
            & + div {
                border-color: $radioBorderActive;
            }
            &:disabled + div {
                border-color: $radioBorder;
            }
            &:checked + div {
                background: $radioBorderActive;
            }
            &:disabled:checked + div {
                background: $radioDisabled;
                border-color: $radioBorder;
            }
        }
    }
    &.fancy {
        input {
            & + div {
                &:after {
                    box-shadow: 0 ($radioSize - 4px) 0 $radioBorderActive, 0 (-$radioSize + 4px) 0 $radioBorderActive, (-$radioSize + 4px) 0 0 $radioBorderActive, ($radioSize - 4px) 0 0 $radioBorderActive, ($radioSize - 10px) ($radioSize - 10px) 0 $radioBorderActive, (-$radioSize + 10px) ($radioSize - 10px) 0 $radioBorderActive, ($radioSize - 10px) (-$radioSize + 10px) 0 $radioBorderActive, (-$radioSize + 10px) (-$radioSize + 10px) 0 $radioBorderActive;
                }
            }
        }
    }
}

.switch {
    & > span {
        line-height: $switchSize;
    }
    input {
        & + div {
            width: $switchSize * 2;
            height: $switchSize;
            border: 1px solid $switchBorder;
            background: $switchBackground;
            border-radius: $switchRadius;
            &:before {
                float: left;
                width: $switchSize - 6;
                height: $switchSize - 6;
                background: $switchDot;
                pointer-events: none;
                margin-top: 2px;
                margin-left: 2px;
                border-radius: inherit;
                @include transition(all .25s cubic-bezier(.54,1.85,.5,1));
            }
        }
        &:checked + div {
            background: $switchActive;
            border: 1px solid $switchBorderActive;
            &:before {
                @include translate($switchSize, 0)
            }
        }
        &:disabled + div {
            cursor: not-allowed;
            background: $switchDisabled;
            border-color: $switchBorder;
            &:before {
                background: $switchBorder;
            }
        }
    }
    &.fancy {
        input {
            & + div {
                &:after {
                    box-shadow: 0 ($switchSize - 4px) 0 $switchBorderActive, 0 (-$switchSize + 4px) 0 $switchBorderActive, (-$switchSize - 6px) 0 0 $switchBorderActive, ($switchSize + 6px) 0 0 $switchBorderActive, ($switchSize - 3px) ($switchSize - 7px) 0 $switchBorderActive, (-$switchSize + 3px) ($switchSize - 7px) 0 $switchBorderActive, ($switchSize - 3px) (-$switchSize + 7px) 0 $switchBorderActive, (-$switchSize + 3px) (-$switchSize + 7px) 0 $switchBorderActive;
                }
            }
        }
    }
    &:hover {
        input {
            &:disabled + div {
                border-color: $switchBorder;
            }
            &:checked + div {
                background: $switchBorderActive;
            }
            &:disabled:checked + div {
                background: $switchDisabled;
                border-color: $switchBorder;
            }
        }
    }
}
