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

  &: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 having
 * additional 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;
}