@use "@angular/material" as mat;

mat-form-field {
    @include mat.form-field-density(-2);
    @include mat.form-field-overrides(
        (
            outlined-focus-label-text-color: var(--mat-sys-primary),
            outlined-focus-outline-color: var(--mat-sys-primary),
            outlined-focus-outline-width: 3px,
            outlined-error-label-text-color: var(--mat-sys-error),
            outlined-error-focus-label-text-color: var(--mat-sys-error),
            outlined-error-outline-color: var(--mat-sys-error),
            outlined-error-caret-color: var(--mat-sys-error),
            outlined-input-text-placeholder-color: var(
                    --mat-sys-on-surface-variant
                ),
        )
    );

    .mat-mdc-floating-label {
        top: 50%;
    }

    &:has(textarea) {
        &[hySize="small"] {
            .mat-mdc-form-field-icon-suffix {
                padding: var(--hy-spacing-small) 0;

                mat-icon {
                    padding-top: var(--hy-spacing-xx-small);
                }
            }
        }

        &[hySize="large"] {
            .mat-mdc-form-field-icon-suffix {
                padding: var(--hy-spacing-medium) 0;
            }
        }

        .mat-mdc-form-field-icon-suffix {
            height: -webkit-fill-available;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-bottom: var(--hy-spacing-medium-small);
            padding-top: var(--hy-spacing-medium-small);
            margin-left: var(--hy-spacing-x-small);
        }
    }

    &[hySize="small"] {
        @include mat.form-field-density(-4);

        .mat-mdc-form-field-icon-suffix,
        .mat-mdc-form-field-icon-prefix {
            button {
                margin: 0 var(--hy-spacing-small);
            }

            mat-icon {
                font-size: 1.25rem;
                width: 1.25rem;
                height: 1.25rem;
            }
        }
    }

    &[hySize="large"] {
        @include mat.form-field-density(0);
    }

    &.mat-form-field-disabled {
        mat-hint {
            color: color-mix(
                in srgb,
                var(--mat-sys-on-surface-variant) var(--hy-state-layer-x-large),
                transparent
            );
        }
    }

    > .mat-mdc-text-field-wrapper {
        background-color: var(--mat-sys-surface-container-lowest);
    }

    .mat-mdc-form-field-icon-suffix,
    .mat-mdc-form-field-icon-prefix {
        width: 3rem;
        button {
            margin: 0 var(--hy-spacing-x-small);
        }
    }

    mat-hint {
        color: var(--mat-sys-on-surface-variant);
    }
}