@import "../var.scss";

$j-prefix-form: "#{$j-prefix}-form" !default;
$j-prefix-form-field: "#{$j-prefix}-form-field" !default;
$j-prefix-form-error: "#{$j-prefix}-form-error" !default;

.#{$j-prefix-form} {
}

.#{$j-prefix-form-field} {
    display: flex;

    > *:not(:last-child) {
        margin-right: 10px;
    }

    &:not(:last-child) {
        margin-bottom: 10px;
    }
}

.#{$j-prefix-form-error} {
    font-size: 14px;
    color: red;
    pointer-events: none;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.1s ease-in-out;

    &[data-active] {
        visibility: visible;
        opacity: 1;
        margin: 10px 0;
        height: auto;
    }
}