$height: 20px;
// 无error情况
.atom-input {
    position: relative;
    display: flex;
    align-items: center;
    font-size: $big;
    width: 100%;
    background: $background;
    &__title {
        align-self: center;
        padding-right: $gutter;
    }
    &__input {
        flex: 1;
        align-self: center;
        font-size: $normal;
        background: rgba(255, 255, 255, 0);
        border: 0 none;
        outline: none;
        width: 100%;
        height: $height;
        line-height: $height;
    }

    &[readonly]{
        .atom-input__btn-empty {
            display: none;
        }
    }

    &__btn-empty {
        align-self: center;
    }
    &__error {
        display: none;
    }
    /*loading*/
    &__loading {
        display: none;
        height: 12px;
        width: 12px; // border-color: transparent transparent $lighter $lighter !important;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
        margin-right: $gutter/2;
        border-color: transparent;
        border-top-color: $light;
        border-right-color: $lighter;
        border-bottom-color: $lighter;
        border-left-color: $lighter;
        animation: rotation infinite $duration*2 linear;
    }
    &[loading=true] {
        .atom-input__loading {
            display: inline-block;
        }
    }
    &__append {
        display: block;
        align-self: center;
    }
    /* ================================ !出现警告 ================================ */
    &[error] {
        .atom-input {
            &__error {
                display: block;
                margin-left: $gutter/2;
                position: relative;
                color: $danger;
                border: 1px solid $danger;
                height: 16px;
                width: 16px;
                align-self: center;
                border-radius: 50%;
                svg {
                    display: block;
                }
                .error-message {
                    animation: 1s showTip;
                    display: block;
                    position: absolute;
                    top: 24px;
                    right: -3px;
                    z-index: 2; // width: 150px;
                    background: rgba($danger, 0.8);
                    color: $sub;
                    border-radius: $radius;
                    padding: $gutter/3;
                    color: $sub;
                    font-size: $small;
                    word-break: keep-all;
                    white-space: nowrap;
                    .triangle {
                        transform: rotate(180deg);
                        position: absolute;
                        right: 5px;
                        top: -5px;
                        border-top-color: rgba($danger, 0.8);
                    }
                }
            }
        }
    }
    @keyframes showTip {
        from {
            opacity: 0;
            transform: translateY(-5%);
        }
        50% {
            transform: translateY(5%);
        }
        to {
            transform: translateY(0);
        }
    }
}