/* validation errors */
.error {
    background: $color-danger;
    color: white;
    position: absolute;
    left: $gutter + 2;
    will-change: transform;
    top: 100%;
    // height: 24px;
    // line-height: 24px;
    margin-top: -6px;
    padding: 4px 10px;
    font-size: $font-size-sm;
    border-radius: $radius-lg;
    border-top-left-radius: 0;
    z-index: 1;
    min-width: 150px;
    transform-origin: 0 0;
    line-height: 1.4;
    box-shadow: 0 2px 10px rgba(130, 24, 24, 0.3);
    visibility: hidden;
    transition: 200ms ease;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);

    &_visible {
        visibility: visible;
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    .container__isFetching & {
        visibility: hidden;
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    &:before {
        content: '';
        display: block;
        position: absolute;
        top: -6px;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8px 6px 0;
        border-color: transparent transparent $color-danger transparent;
    }
}