sass-references/angular-material/material/expansion/expansion-panel-header.scss

@use '@angular/cdk';
@use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion;
@use '../core/tokens/token-utils';
@use './expansion-variables';

.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;
  }

  @include token-utils.use-tokens(
    tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
    @include token-utils.create-token-slot(height, header-collapsed-state-height);
    @include token-utils.create-token-slot(font-family, header-text-font);
    @include token-utils.create-token-slot(font-size, header-text-size);
    @include token-utils.create-token-slot(font-weight, header-text-weight);
    @include token-utils.create-token-slot(line-height, header-text-line-height);
    @include token-utils.create-token-slot(letter-spacing, header-text-tracking);

    &.mat-expanded {
      @include token-utils.create-token-slot(height, header-expanded-state-height);
    }

    &[aria-disabled='true'] {
      @include token-utils.create-token-slot(color, header-disabled-state-text-color);
    }

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

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

        // 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) {
          @include token-utils.create-token-slot(background, container-background-color);
        }
      }

      // 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 {
        @include token-utils.create-token-slot(background, header-focus-state-layer-color);
      }
    }
  }

  // If the `NoopAnimationsModule` is used, disable the height transition.
  &._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 {
  @include token-utils.use-tokens(
    tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
    @include token-utils.create-token-slot(color, header-text-color);
  }
}

.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;

  @include token-utils.use-tokens(
    tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
    @include token-utils.create-token-slot(color, header-description-color);
  }
}

// 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: '';
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: middle;

    @include token-utils.use-tokens(
      tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
      @include token-utils.create-token-slot(color, header-indicator-color);
      @include token-utils.create-token-slot(display, legacy-header-indicator-display,
        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;

    @include token-utils.use-tokens(
      tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
      @include token-utils.create-token-slot(fill, header-indicator-color);
      @include token-utils.create-token-slot(display, header-indicator-display, none);
    }
  }
}

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