$mat-expansion-panel-header-height: 48px;
$mat-expansion-panel-header-height-expanded: 48px;

.mat-expansion-panel-header {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  height: $mat-expansion-panel-header-height;
  line-height: $mat-expansion-panel-header-height;
  padding: 0 15px;

  &.mat-expanded {
    height: $mat-expansion-panel-header-height-expanded;
    line-height: $mat-expansion-panel-header-height-expanded;
  }

  &:focus {
    outline: 2px dotted #aeb0b5;
    outline-offset: -2px;
  }

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

.mat-content {
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
  font-weight: 600;
}

.mat-expansion-panel-header-title {
  display: flex;
  flex-grow: 1;
  font-size: 15px;
  margin-right: 16px;
}

.mat-expansion-panel-header-description {
  display: flex;
  flex-grow: 2;
  font-size: 15px;
  margin-right: 16px;
}

/** 
 * 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 1px 1px 0;
  margin-right: 10px;
  content: '';
  display: inline-block;
  padding: 4px;
  transform: rotate(-45deg);
  vertical-align: baseline;
}