@use "variables" as *;
@import "mixins";

.form__buttons {
    display: flex;
    justify-content: center;
    margin-top: $spacing-9;

    button {
        margin: 0 $spacing-1;
    }
}

.form__group {
    margin: $form-field-spacing 0;
    position: relative;

    &:after {
        clear: both;
        content: "";
        display: table;
    }

    & .md-inputtext,
    & > .ui-inputtext {
        width: 100%;
    }

    .ui-dialog-content &:first-child {
        padding-top: 0;
    }

    .ui-dialog-content &:last-child {
        padding-bottom: 0;
    }

    .ui-dropdown {
        width: 100%;
    }
}

.form__group--validation {
    min-height: 60px;
}

.form__group--helper {
    position: relative;
    input[pinputtext] {
        padding-right: $spacing-9;
    }

    dot-field-helper {
        @include dot-field-helper-on-input;
    }
}

.p-field-hint,
.form__group-hint {
    color: $color-palette-gray-700;
    display: block;
    font-size: $font-size-sm;
    margin-top: $spacing-0;
    word-break: break-word;
}

.form__label {
    color: $label-color;
    display: block;
    font-size: $label-font-size;
}

.form__hint-icon {
    border-radius: 50%;
    border: solid 1px;
    color: $color-palette-gray-700;
    cursor: pointer;
    margin-left: $spacing-3;
    text-align: center;
    width: 15px;

    .form__group &:first-child {
        margin: 0;
        position: absolute;
        right: 0;
        top: 32px;
        z-index: 1;
    }

    .form__group:first-child &:first-child {
        top: 25px;
    }
}

.form-group__two-cols {
    & > *:first-child {
        display: inline-block;
        padding-bottom: $spacing-1;
    }

    @media (min-width: $screen-md-min) {
        & > *:first-child {
            padding-bottom: 0;
        }

        align-items: center;
        display: flex;
        justify-content: space-between;
    }
}

.error-message {
    small {
        color: $color-alert-red;
    }
}

.hint-message {
    small {
        color: var(--gray-700);
    }
}
