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

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

// The horizontal padding between the edge of the form field fill box and the start of the text.
$outline-side-padding: 0.75em !default;
// The scale of the subscript and floating label text w.r.t the value text.
$outline-subscript-font-scale: 0.75 !default;
// The amount of overlap between the label and the outline.
$outline-label-overlap: 0.25em;
// The border radius of the outline.
$outline-border-radius: 5px;
// The width of the outline.
$outline-width: 1px;
// The width of the thick outline (used for focus, hover, and error state).
$outline-thick-width: 2px;
// The horizontal padding between the edge of the subscript box and the start of the subscript text.
$outline-subscript-padding:
    private.private-div($outline-side-padding, $outline-subscript-font-scale);


.mat-form-field-appearance-outline {
  // We need to add margin to the top to reserve space in the layout for the label which sticks out
  // of the top. In order to ensure that the outline appearance aligns nicely with other form-field
  // appearances when center-aligned, we also need to add the same amount of margin to the bottom.
  .mat-form-field-wrapper {
    margin: $outline-label-overlap 0;
  }

  .mat-form-field-flex {
    padding: 0 $outline-side-padding 0 $outline-side-padding;
    margin-top: -$outline-label-overlap;
    position: relative;
  }

  .mat-form-field-prefix,
  .mat-form-field-suffix {
    top: $outline-label-overlap;
  }

  .mat-form-field-outline {
    display: flex;
    position: absolute;
    top: $outline-label-overlap;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .mat-form-field-outline-start,
  .mat-form-field-outline-end {
    border: $outline-width solid currentColor;
    min-width: $outline-border-radius;
  }

  .mat-form-field-outline-start {
    border-radius: $outline-border-radius 0 0 $outline-border-radius;
    border-right-style: none;

    [dir='rtl'] & {
      border-right-style: solid;
      border-left-style: none;
      border-radius: 0 $outline-border-radius $outline-border-radius
                     0;
    }
  }

  .mat-form-field-outline-end {
    border-radius: 0 $outline-border-radius $outline-border-radius 0;
    border-left-style: none;
    flex-grow: 1;

    [dir='rtl'] & {
      border-left-style: solid;
      border-right-style: none;
      border-radius: $outline-border-radius 0 0
                     $outline-border-radius;
    }
  }

  .mat-form-field-outline-gap {
    // Workaround for Chrome's treatment of borders with non-integer (scaled) widths
    // refer to https://github.com/angular/components/issues/10710
    border-radius: 0.000001px;

    border: $outline-width solid currentColor;
    border-left-style: none;
    border-right-style: none;
  }

  &.mat-form-field-can-float.mat-form-field-should-float {
    .mat-form-field-outline-gap {
      border-top-color: transparent;
    }
  }

  .mat-form-field-outline-thick {
    opacity: 0;

    .mat-form-field-outline-start,
    .mat-form-field-outline-end,
    .mat-form-field-outline-gap {
      border-width: $outline-thick-width;
    }
  }

  &.mat-focused,
  &.mat-form-field-invalid {
    .mat-form-field-outline {
      opacity: 0;
      transition: opacity 100ms variables.$swift-ease-out-timing-function;
    }
    .mat-form-field-outline-thick {
      opacity: 1;
    }
  }

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

  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
    & .mat-form-field-outline {
      opacity: 0;
      transition: opacity 600ms variables.$swift-ease-out-timing-function;
    }

    & .mat-form-field-outline-thick {
      opacity: 1;
    }
  }

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

  &._mat-animation-noopable {
    &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
    .mat-form-field-outline,
    .mat-form-field-outline-start,
    .mat-form-field-outline-end,
    .mat-form-field-outline-gap {
      transition: none;
    }
  }
}
