@import "../../../themes/core/variables";
@import "../../../themes/core/typography";
@import "../../../themes/theme/variable";
@import "../../../themes/theme/mixins";

.mat-expansion-panel {
  &.qms-expansion:not([class*="mat-elevation-z"]) {
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid $border-bottom-item;
    margin: 0 1rem;
    border-radius: 0;
    font-family: Open Sans;

    &.no-border {
      border-bottom: none;
    }

    .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"] {
      pointer-events: none;
      user-select: none;

      .qms-list-header {
        * {
          color: theme-apply($primary);
          opacity: 0.38;
        }
      }
    }

    .mat-expansion-panel-header {
      &:hover {
        &:not([aria-disabled="true"]) {
          background: theme-apply($primary-light-6-opacity);
        }

        .subtitle,
        .default-subtitle,
        .caption,
        .mat-expansion-indicator::after,
        .material-icons,
        .material-icons-outlined {
          color: theme-apply($primary);
        }
      }

      &:active {
        &:not([aria-disabled="true"]) {
          background: theme-apply($primary-light-24-opacity);
        }

        .subtitle,
        .default-subtitle,
        .caption,
        .mat-expansion-indicator::after,
        .material-icons,
        .material-icons-outlined {
          color: theme-apply($primary);
        }
      }

      &.cdk-keyboard-focused {
        background-color: theme-apply($primary-light-12-opacity);
        border-radius: $border-radius-default;

        .subtitle,
        .default-subtitle,
        .caption,
        .mat-expansion-indicator::after,
        .material-icons,
        .material-icons-outlined {
          color: theme-apply($primary);
        }
      }

      &.active-item {
        color: theme-apply($primary);

        @include color-inherit;
      }
    }

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