expansion-panel-header.scss

@use '../core/style/layout-common';
@use '../../cdk/a11y';
@use './expansion-variables';
@use './expansion-mixins';

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

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

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

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

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

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

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

// Creates the expansion indicator arrow. Done using ::after
// rather than havingadditional nodes in the template.
.mat-expansion-indicator::after {
  border-style: solid;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  vertical-align: middle;
}

@include a11y.high-contrast(active, off) {
  @include expansion-mixins.private-expansion-focus {
    &::before {
      // These styles are identical to the ones generated for all
      // `.mat-focus-indicator` when strong focus indication is enabled.
      // We have to repeat them, because strong focus is opt-in.
      @include layout-common.fill();
      box-sizing: border-box;
      pointer-events: none;
      border: 3px solid;
      border-radius: 4px;
      content: '';
    }
  }
  .mat-expansion-panel-content {
    border-top: 1px solid;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}