.form-field {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--ds-space-100, 8px);

    & .form-control {
        display: flex;
        align-items: center;
    }

    & .form-input {
        flex: 1;
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        font: inherit;
        color: inherit;
        outline: none;
    }

    & .password-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        block-size: 24px;
        padding-inline: 8px;
        border: none;
        border-radius: 6px;
        background-color: transparent;
        color: var(--ds-text-subtle, #505258);
        cursor: pointer;

        &:hover {
            color: var(--ds-text, #292a2e);
        }

        &:focus-visible {
            outline: 2px solid var(--ds-border-focused, #2684ff);
            outline-offset: -2px;
        }

        & :is(.password-toggle-show, .password-toggle-hide) {
            display: flex;
            inline-size: 20px;
            block-size: 20px;
        }

        & .password-toggle-hide {
            display: none;
        }

        &.is-visible {
            & .password-toggle-show {
                display: none;
            }

            & .password-toggle-hide {
                display: flex;
            }
        }
    }

    & .form-message-on-invalid {
        display: none;

        & svg {
            flex: none;
        }
    }

    &:has(input:user-invalid) .form-message-on-invalid {
        display: flex;
    }

    &.form-invalid {
        & .form-control {
            border-color: var(--ds-border-danger, #e2483d);
            box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-danger, #e2483d);
        }

        & .form-message-on-invalid {
            display: flex;
        }
    }
}

.form-label {
    display: inline-block;
    margin-block: var(--ds-space-0, 0) var(--ds-space-050, 4px);
    font: var(--ds-font-body-small, normal 400 12px/16px sans-serif);
    font-weight: var(--ds-font-weight-bold, 653);
    color: var(--ds-text-subtle, #505258);
}

.form-required {
    padding-inline-start: var(--ds-space-025, 2px);
    font-family: var(--ds-font-family-body, sans-serif);
    color: var(--ds-text-danger, #ae2e24);
}

.form-message {
    display: flex;
    gap: var(--ds-space-075, 6px);
    margin-block-start: var(--ds-space-050, 4px);
    font: var(--ds-font-body-small, normal 400 12px/16px sans-serif);
    color: var(--ds-text-subtlest, #6b6e76);

    &.form-message-error {
        color: var(--ds-text-danger, #ae2e24);
    }

    &.form-message-valid {
        color: var(--ds-text-success, #4c6b1f);
    }

    & .form-message-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        block-size: 16px;
    }
}

.form-footer {
    display: flex;
    justify-content: start;
    margin-block-start: var(--ds-space-300, 24px);

    &.form-footer-end {
        justify-content: end;
    }
}

.form-section {
    margin-block-start: var(--ds-space-300, 24px);
}

.form-header {
    min-inline-size: 100%;
    margin-block-start: var(--ds-space-100, 8px);
}