@use 'variables';
@use 'private';
@use 'a11y';

// Styles that only apply to the fill appearance of the form-field.

// The border radius for the form field fill box.
$fill-border-radius: 0px !default;
// The height of the underline at the bottom of the form field fill box.
$fill-underline-height: 1px !default;
// The height of the underline ripple at the bottom of the form field fill box.
$fill-underline-ripple-height: 1px !default;
// The horizontal padding between the edge of the form field fill box and the start of the text.
$fill-side-padding: 0.75em !default;
// The vertical padding between the edge of the form field fill box and the start of the text as
// well as between the floating label and the value.
$fill-line-spacing: 0.60em !default;
// The scale of the subscript and floating label text w.r.t the value text.
$fill-subscript-font-scale: 0.75 !default;
// The horizontal padding between the edge of the subscript box and the start of the subscript text.
$fill-subscript-padding:
    private.private-div($fill-side-padding, $fill-subscript-font-scale);


.mat-form-field-appearance-legacy {
    .mat-form-field-flex {
        border-radius: $fill-border-radius $fill-border-radius 0 0;
        padding: $fill-line-spacing $fill-side-padding 0 $fill-side-padding;
        border: 1px solid rgba(0,0,0,.08);

        @include a11y.high-contrast(active, off) {
            outline: solid 1px;
        }
    }

    &.mat-focused .mat-form-field-flex {
        @include a11y.high-contrast(active, off) {
            outline: dashed 3px;
        }
    }

    .mat-form-field-underline::before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        height: $fill-underline-height;
        width: 100%;
    }

    .mat-form-field-ripple {
        bottom: 0;
        height: $fill-underline-ripple-height;

        @include a11y.high-contrast(active, off) {
            // In high-contrast mode, we hide the ripple as we have a dashed outline as
            // focus indicator.
            height: 0;
        }
    }
    // Note that we need this specific of a selector because we don't want
    // the hover effect to show when the user hovers over the hints.
    &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
        .mat-form-field-ripple {
            opacity: 1;
            transform: none;
            transition: opacity 600ms variables.$swift-ease-out-timing-function;
        }
    }

    &._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
        & ~ .mat-form-field-underline .mat-form-field-ripple {
            transition: none;
        }
    }

    .mat-form-field-subscript-wrapper {
        padding: 0 $fill-subscript-padding;
    }
}
