@import "../../styles/variables";
@import "../../styles/global/functions";

@mixin novo-expansion-panel-theme() {
  .novo-expansion-panel {
    background: var(--background-bright, $white);
    color: var(--text-main, $dark);
  }

  .novo-action-row {
    border-top-color: var(--border, $dark);
  }

  .novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header {
    &:not([aria-disabled="true"]) {
      &.cdk-keyboard-focused,
      &.cdk-program-focused,
      &:hover {
        background: rgba(black, 0.04);
      }
    }
  }

  .novo-expansion-panel-header-title {
    color: var(--text-main, $dark);
  }

  .novo-expansion-panel-header-description,
  .novo-expansion-indicator {
    border-color: var(--text-main, $dark);
  }

  .novo-expansion-panel-header[aria-disabled="true"] {
    color: $grey;
    pointer-events: none;

    .novo-expansion-panel-header-title,
    .novo-expansion-panel-header-description {
      color: inherit;
    }
  }

  .novo-expansion-panel.novo-expanded {
    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
      &[theme="#{$name}"] {
        border-top: 3px solid $color;
      }
    }
  }
}