$module-name: 'narrative-panel';

.#{$module-name} {
  display: flex;
  flex-direction: column;
  background-color: palette('light-background');
  border-bottom: var(--narrative-border-bottom-color) 2px solid;

  &__heading {
    @include typography('title-4');
    @include transition-properties((background-color, color), ease, var(--animation-duration-standard));
    text-transform: uppercase;  // Should this be part of typography?
    letter-spacing: spacing(0.15);  // Should this be part of typography?
    border: 0;
    outline: none;
    padding: spacing(1.5) spacing(1.25);
    cursor: pointer;
    background-color: transparent;
    color: var(--narrative-heading);

    &::after {
      display: block;
      content: '\\\/';
      float: right;
    }

    &:hover {
      background-color: var(--narrative-heading-bg-hover);
      color: palette('selected');
    }
  }

  &__options {
    &-content {
      padding: 0 spacing(1.5) spacing(1.25);
    }
  }

  &--open {
    .#{$module-name} {
      &__heading {
        &:hover {
          background-color: transparent;
        }

        &::after {
          display: block;
          content: '/\\';
        }
      }
    }
  }
}