@import '../core/style/variables';
@import '../core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';

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

// The border radius for the form field fill box.
$mat-form-field-fill-border-radius: 4px !default;
// The height of the underline at the bottom of the form field fill box.
$mat-form-field-fill-underline-height: 1px !default;
// The height of the underline ripple at the bottom of the form field fill box.
$mat-form-field-fill-underline-ripple-height: 2px !default;
// The horizontal padding between the edge of the form field fill box and the start of the text.
$mat-form-field-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.
$mat-form-field-fill-line-spacing: 0.75em !default;
// The scale of the subscript and floating label text w.r.t the value text.
$mat-form-field-fill-subscript-font-scale: 0.75 !default;
// The horizontal padding between the edge of the subscript box and the start of the subscript text.
$mat-form-field-fill-subscript-padding:
    $mat-form-field-fill-side-padding / $mat-form-field-fill-subscript-font-scale;


.mat-form-field-appearance-fill {
  .mat-form-field-flex {
    border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
    padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
             $mat-form-field-fill-side-padding;

    @include cdk-high-contrast {
      outline: solid 1px;
    }
  }

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

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

    @include cdk-high-contrast {
      height: 0;
      border-top: solid $mat-form-field-fill-underline-ripple-height;
    }
  }

  // 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 $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 $mat-form-field-fill-subscript-padding;
  }
}