@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.storybook-accordion {
  width: 100%;
  .accordion-header {
    display: flex;
    &--primary,
    &--secondary {
      justify-content: space-between;
    }

    .header-title {
      padding: 8px;
      &--primary {
        color: $primary;
        @extend .fontPoppinsSemiboldSm;
      }
      &--minimal {
        color: $primary;
        @extend .fontPoppinsSemiboldMd;
      }
      &--secondary {
        @extend .fontPoppinsSemiboldSm;
        color: $black;
      }
    }

    .accordion-arrow {
      &--primary,
      &--secondary,
      &--minimal {
        display: flex;
        align-items: center;
        img {
          height: 30px;
          width: 35px;
        }
      }
      &--minimal {
        color: $primary;
      }
    }
    &--primary:hover,
    &--secondary:hover {
      background-color: $grey_6;
    }
  }
  .accordion-expanded {
    border-bottom: 1px $grey_2 solid;
  }
  .accordion-collapsed {
    &--primary,
    &--secondary {
      @extend .accordion-expanded;
    }
  }
}