@use '@angular/cdk';
@use './m3-expansion';
@use '../core/tokens/token-utils';
@use './expansion-variables';

$fallbacks: m3-expansion.get-tokens();

.mat-expansion-panel-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24px;
  border-radius: inherit;

  .mat-expansion-panel-animations-enabled & {
    transition: height expansion-variables.$header-transition;
  }

  // Ensures that the focus indicator has the same shape as the header.
  &::before {
    border-radius: inherit;
  }

  height: token-utils.slot(expansion-header-collapsed-state-height, $fallbacks);
  font-family: token-utils.slot(expansion-header-text-font, $fallbacks);
  font-size: token-utils.slot(expansion-header-text-size, $fallbacks);
  font-weight: token-utils.slot(expansion-header-text-weight, $fallbacks);
  line-height: token-utils.slot(expansion-header-text-line-height, $fallbacks);
  letter-spacing: token-utils.slot(expansion-header-text-tracking, $fallbacks);

  &.mat-expanded {
    height: token-utils.slot(expansion-header-expanded-state-height, $fallbacks);
  }

  &[aria-disabled='true'] {
    color: token-utils.slot(expansion-header-disabled-state-text-color, $fallbacks);
  }

  &:not([aria-disabled='true']) {
    cursor: pointer;

    .mat-expansion-panel:not(.mat-expanded) &:hover {
      background: token-utils.slot(expansion-header-hover-state-layer-color, $fallbacks);

      // Disable the hover on touch devices since it can appear like it is stuck. We can't use
      // `@media (hover)` above, because the desktop support browser support isn't great.
      @media (hover: none) {
        background: token-utils.slot(expansion-container-background-color, $fallbacks);
      }
    }

    // The `.mat-expansion-panel` here is redundant, but we need the additional specificity.
    .mat-expansion-panel &.cdk-keyboard-focused,
    .mat-expansion-panel &.cdk-program-focused {
      background: token-utils.slot(expansion-header-focus-state-layer-color, $fallbacks);
    }
  }

  &._mat-animation-noopable {
    transition: none;
  }

  &:focus,
  &:hover {
    outline: none;
  }

  &.mat-expanded:focus,
  &.mat-expanded:hover {
    background: inherit;
  }

  &.mat-expansion-toggle-indicator-before {
    flex-direction: row-reverse;

    .mat-expansion-indicator {
      margin: 0 16px 0 0;

      [dir='rtl'] & {
        margin: 0 0 0 16px;
      }
    }
  }
}

.mat-content {
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden;

  // width of .mat-expansion-indicator::after element
  &.mat-content-hide-toggle {
    margin-right: 8px;

    [dir='rtl'] & {
      margin-right: 0;
      margin-left: 8px;
    }

    .mat-expansion-toggle-indicator-before & {
      margin-left: 24px;
      margin-right: 0;

      [dir='rtl'] & {
        margin-right: 24px;
        margin-left: 0;
      }
    }
  }
}

.mat-expansion-panel-header-title {
  color: token-utils.slot(expansion-header-text-color, $fallbacks);
}

.mat-expansion-panel-header-title,
.mat-expansion-panel-header-description {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  margin-right: 16px;
  align-items: center;

  [dir='rtl'] & {
    margin-right: 0;
    margin-left: 16px;
  }

  .mat-expansion-panel-header[aria-disabled='true'] & {
    color: inherit;
  }
}

.mat-expansion-panel-header-description {
  flex-grow: 2;

  color: token-utils.slot(expansion-header-description-color, $fallbacks);
}

// Creates the expansion indicator arrow. Done using ::after
// rather than having additional nodes in the template.
.mat-expansion-indicator {
  .mat-expansion-panel-animations-enabled & {
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mat-expansion-panel-header.mat-expanded & {
    transform: rotate(180deg);
  }

  &::after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: '';
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: middle;

    color: token-utils.slot(expansion-header-indicator-color, $fallbacks);
    display: token-utils.slot(expansion-legacy-header-indicator-display, $fallbacks, inline-block);
  }

  svg {
    width: 24px;
    height: 24px;

    // The SVG icon isn't edge-to-edge so we need to offset
    // it slightly so it's aligned correctly horizontally.
    margin: 0 -8px;

    // Since the container is `display: inline`, we need to set this to center the arrow.
    // Ideally we'd make the container `inline-flex`, but that affects M2.
    vertical-align: middle;

    fill: token-utils.slot(expansion-header-indicator-color, $fallbacks);
    display: token-utils.slot(expansion-header-indicator-display, $fallbacks, none);
  }
}

@include cdk.high-contrast {
  .mat-expansion-panel-content {
    border-top: 1px solid;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
