@import "../../../themes/core/typography";

.mat-expansion-panel {
  &.qms-expansion {
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid $border-bottom-item;
    margin: 0 1rem;
    border-radius: 0;
    font-family: Open Sans;

    .mat-expansion-panel-header {
      height: $item-height;
      padding: 0 10px;
      font-family: inherit;

      &.mat-2-line {
        height: $two-line-height;
      }

      &.mat-3-line {
        height: $three-line-height;
      }

      .title-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        height: inherit;
      }
    }

    .mat-expansion-panel-header[aria-disabled="true"] {
      color: black(0.38);
      pointer-events: none;
      @include color-inherit;
    }

    .mat-expansion-panel-header {
      &:hover {
        &:not([aria-disabled="true"]) {
          background: black(0.08);
        }
      }

      &:active {
        &:not([aria-disabled="true"]) {
          background: black(0.12);
        }
      }   

      
      &.cdk-keyboard-focused {
        border: 2px solid $primary;
        border-radius: $border-radius-default;
      }

      &.active-item {
        color: $primary;

        @include color-inherit;
      }
    }

    .mat-expansion-panel-body {
      padding: 1rem 10px 1rem;
    }
  }
}
