@import '../../cdk/a11y/a11y';

$mat-sort-header-arrow-margin: 6px;
$mat-sort-header-arrow-container-size: 12px;
$mat-sort-header-arrow-stem-size: 10px;
$mat-sort-header-arrow-pointer-length: 6px;
$mat-sort-header-arrow-thickness: 2px;
$mat-sort-header-arrow-hint-opacity: 0.38;

.mat-sort-header-container {
  display: flex;
  cursor: pointer;
  align-items: center;

  .mat-sort-header-disabled & {
    cursor: default;
  }
}

.mat-sort-header-position-before {
  flex-direction: row-reverse;
}

.mat-sort-header-button {
  border: none;
  background: 0 0;
  display: flex;
  align-items: center;
  padding: 0;
  cursor: inherit;
  outline: 0;
  font: inherit;
  color: currentColor;

  // The `outline: 0` from above works on all browsers, however Firefox also
  // adds a special `focus-inner` which we have to disable explicitly. See:
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Firefox
  &::-moz-focus-inner {
    border: 0;
  }
}

.mat-sort-header-arrow {
  height: $mat-sort-header-arrow-container-size;
  width: $mat-sort-header-arrow-container-size;
  min-width: $mat-sort-header-arrow-container-size;
  position: relative;
  display: flex;

  // Start off at 0 since the arrow may become visible while parent are animating.
  // This will be overwritten when the arrow animations kick in. See #11819.
  opacity: 0;

  &,
  [dir='rtl'] .mat-sort-header-position-before & {
    margin: 0 0 0 $mat-sort-header-arrow-margin;
  }

  .mat-sort-header-position-before &,
  [dir='rtl'] & {
    margin: 0 $mat-sort-header-arrow-margin 0 0;
  }
}

.mat-sort-header-stem {
  background: currentColor;
  height: $mat-sort-header-arrow-stem-size;
  width: $mat-sort-header-arrow-thickness;
  margin: auto;
  display: flex;
  align-items: center;

  @include cdk-high-contrast {
    width: 0;
    border-left: solid $mat-sort-header-arrow-thickness;
  }
}

.mat-sort-header-indicator {
  width: 100%;
  height: $mat-sort-header-arrow-thickness;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.mat-sort-header-pointer-middle {
  margin: auto;
  height: $mat-sort-header-arrow-thickness;
  width: $mat-sort-header-arrow-thickness;
  background: currentColor;
  transform: rotate(45deg);

  @include cdk-high-contrast {
    width: 0;
    height: 0;
    border-top: solid $mat-sort-header-arrow-thickness;
    border-left: solid $mat-sort-header-arrow-thickness;
  }
}

.mat-sort-header-pointer-left,
.mat-sort-header-pointer-right {
  background: currentColor;
  width: $mat-sort-header-arrow-pointer-length;
  height: $mat-sort-header-arrow-thickness;
  position: absolute;
  top: 0;

  @include cdk-high-contrast {
    width: 0;
    height: 0;
    border-left: solid $mat-sort-header-arrow-pointer-length;
    border-top: solid $mat-sort-header-arrow-thickness;
  }
}

.mat-sort-header-pointer-left {
  transform-origin: right;
  left: 0;
}

.mat-sort-header-pointer-right {
  transform-origin: left;
  right: 0;
}