@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";

@include b(form) {
    @include m(label-left) {
        & .el-form-item__label {
            text-align: left;
        }
    }
    @include m(label-top) {
        & .el-form-item__label {
            float: none;
            display: inline-block;
            text-align: left;
            padding: 0 0 10px 0;
        }
    }
    @include m(inline) {
        & .el-form-item {
            display: inline-block;
            margin-right: 10px;
        }
        & .el-form-item__label {
            float: none;
            display: inline-block;
        }
        & .el-form-item__content {
            display: inline-block;
        }
        &.el-form--label-top .el-form-item__content {
            display: block;
        }
    }
}
@include b(form-item) {
    margin-bottom: 22px;
    @include utils-clearfix;

    & .el-form-item {
        margin-bottom: 0;
    }

    & .el-input__validateIcon {
        display: none;
    }

    @include m(medium) {
        .el-form-item__label {
            line-height: 36px;
        }
        .el-form-item__content {
            line-height: 36px;
        }
    }
    @include m(small) {
        .el-form-item__label {
            line-height: 32px;
        }
        .el-form-item__content {
            line-height: 32px;
        }
        &.el-form-item {
            margin-bottom: 18px;
        }
        .el-form-item__error {
            padding-top: 2px;
        }
    }
    @include m(mini) {
        .el-form-item__label {
            line-height: 28px;
        }
        .el-form-item__content {
            line-height: 28px;
        }
        &.el-form-item {
            margin-bottom: 18px;
        }
        .el-form-item__error {
            padding-top: 1px;
        }
    }

    @include e(label) {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: $--color-text-regular;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    @include e(content) {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        @include utils-clearfix;

        .el-input-group {
            vertical-align: middle;
        }
    }
    @include e(error) {
        color: $color-danger-dark;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;

        @include m(inline) {
            position: relative;
            top: auto;
            left: auto;
            display: inline-block;
            margin-left: 10px;
        }
    }

    @include when(required) {
        .el-form-item__label:before {
            content: "*";
            color: $color-danger-dark;
            margin-right: 4px;
        }
    }

    @include when(error) {
        & .el-input__inner,
        & .el-textarea__inner {
            &, &:focus {
                border-color: $color-danger-dark;
            }
        }
        & .el-input-group__append,
        & .el-input-group__prepend {
            & .el-input__inner {
                border-color: transparent;
            }
        }
        .el-input__validateIcon {
            color: $color-danger-dark;
        }
    }
    @include when(success) {
        & .el-input__inner,
        & .el-textarea__inner {
            &, &:focus {
                border-color: $color-success-dark;
            }
        }
        & .el-input-group__append,
        & .el-input-group__prepend {
            & .el-input__inner {
                border-color: transparent;
            }
        }
        .el-input__validateIcon {
            color: $color-success-dark;
        }
    }
    @include m(feedback) {
        .el-input__validateIcon {
            display: inline-block;
        }
    }
}

.el-form-item {
    margin-bottom: 1.75em;
    max-width: 30em;

    .el-input__inner {
        background-color: $--color-white;
        font-family: inherit;
    }
}

.el-form-item--full-width {
    max-width: 100%;
}

// Wrapper class for form-items that contain other form-items
.el-form-item__container {
    .el-form-item__content:first-child {
        line-height: unset;
    }
}

.el-form-item--highlighted {
    .el-input__inner {
        border-color: $color-highlight;
        background-color: $color-highlight-light;
    }
}

.el-form-item.is-error {
    .is-bordered {
        border: 1px solid $color-warning-dark;
    }
}

.el-form-item.is-error {
    .el-input__inner, .el-textarea__inner {
        border: 1px solid $color-warning-dark;
        background-color: darken($color-warning-light, 2%);
        transition: background-color 120ms ease-in;

        &:focus {
            border: 1px solid $color-warning-dark;
            background-color: $color-warning-light;
        }
    }
}

.el-form-item__error {
    color: $color-warning-dark;
}

.el-form-item.is-success {
    .el-input__inner {
        border-color: $--input-border-color !important; // Work around success instant validation.

        &:focus {
            border-color: $--input-focus-border !important; // Work around success instant validation.
        }
    }

    .el-date-editor {
        width: 100%;
    }
}

// Required Attribute position overrides
.el-form-item.is-required{
    .el-form-item__label:before{
        content: "*";
        color: $color-info-dark;
        margin: 0;
        position: absolute;
        right: -.75em;
    }
}

// Use flex styling for left-aligned form labels
.el-form--label-left, .el-form--label-right {
    .el-form-item {
        display: flex;
        align-items: center;
    }

    .el-form-item__label {
        margin: 0;
    }

    .el-form-item__content {
        flex: 1;
    }
}

//Override strange line height in stepper label
.el-step__title{
    line-height: normal;
}
// Override bad label positioning logic (line-height dependent)
.el-form-item__label {
    position: relative;
    line-height: 1em;
    margin-bottom: .4em;
    font-size: 1em;

    & .el-form-item__label {
        padding-bottom: .5em;
    }
}

.el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item__content {
    font-size: 1em;

    li {
        line-height: initial;
    }
}

.el-form-item__help-text {
    color: $color-gray--060;
    display: block;
    font-size: $--font-size-small;
}

.el-form-item__error--center {
    position: relative;
    text-align: center;
}

// Select input min width when inside a <el-input>
.el-input .el-select {
    .el-input--suffix {
        min-width: 150px;
    }
}

// Select arrow position overrides (again was dependent on 40px line height)
.el-select .el-input .el-input__icon {
    font-size: .75em;

    .el-input__suffix {
        top: -3px;
    }

    .el-input__suffix-inner {
        line-height: 1;
    }
}

.el-input--large {
    font-size: 1.5em;

    & .el-input__inner {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.el-select--wide {
    display: block;
}

.el-select-dropdown {
    margin-top: .25em !important;

    .popper__arrow {
        display: none; // Hide arrow on select dropdowns
    }
}

.el-select-dropdown__item {
    height: auto;
    padding: .3em .75em;

    &.selected {
        text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15), inset 0 -1px 1px rgba(0, 0, 0, .15);
        background: $color-brand--055 !important;
    }
}

.el-checkbox {
    font-size: 1em;
}

.el-checkbox__label {
    padding-right: 10px;
    font-size: .9em;
    line-height: 1em;

    * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.el-checkbox--centered {
    display: flex;
    align-items: center;
}

.inline-edit--inverse {
    border: 1px solid rgba(255, 255, 255, .2);
}

.error {
    color: $color-danger-dark;
    font-size: $--font-size-small;
    line-height: 1;
    padding-top: 4px;
}

.inline-form-item {
    .el-input__inner {
        @include inline-edit;
    }
}

.inline-form-item__active {
    .el-input__inner {
        @include inline-edit__active;
    }
}

// For long names in the prepended select dropdown
.el-input-group__prepend .el-input.el-input--suffix .el-input__inner {
    font-size: .85em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

// Fix for input shifting up when rules helper collapses
.c-input-password--has-rule-helper .el-input-group__append {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
}