@use "sass:math";
@use "../../tools/colour";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-accordion {
  @include spacing.space-above;

  // NON INTERACTIVE
  &__item {
    @include spacing.space-above;
  }

  &__heading {
    padding-top: spacing.space(1);
  }

  &__body {
    padding-top: spacing.space(1);
  }

  // INTERACTIVE
  &__toggle-all {
    margin-bottom: spacing.space(1);
    padding: 0;

    background: transparent;

    border: none;
    border-radius: 0.1px;

    cursor: pointer;

    @include colour.colour-font("link");
    @include typography.font-size(16);

    &:hover {
      @include typography.interacted-text-decoration;
    }
  }

  &__details {
    @include colour.colour-border("keyline", 1px, solid, bottom);

    position: relative;
    z-index: 1;

    &:first-of-type {
      @include colour.colour-border("keyline", 1px, solid, top);
    }
  }

  &__summary {
    width: 100%;
    margin: 0;
    padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)
      spacing.space(1);

    display: block;

    position: relative;

    line-height: inherit;
    text-align: left;

    list-style: none;

    background: transparent;

    border: none;
    border-radius: 0.1px;

    cursor: pointer;

    @include colour.colour-font("font-dark");
    @include typography.font-size(18);
    @include typography.main-font(true);

    * {
      font-size: inherit;
    }

    &::before {
      content: "";

      width: 0;
      height: 0;

      position: absolute;
      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
      right: 0.75rem;

      border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;
      border-color: colour.colour-var("font-light") transparent;
      border-style: solid;
    }

    &:hover {
      @include typography.interacted-text-decoration;
      @include colour.colour-background("background-tint");

      &::before {
        border-color: colour.colour-var("font-dark") transparent;
      }
    }

    &[aria-expanded="true"] {
      &::before {
        border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
      }
    }

    &:active {
      z-index: 1;
    }
  }

  &__content {
    padding: spacing.space(1);

    position: relative;

    border-radius: 0.1px;
  }

  @include colour.on-forced-colours {
    &__summary {
      &::before {
        content: "\2193";

        width: auto;
        height: auto;

        top: calc(50% - 0.5rem);

        line-height: 1rem;

        border: none;
      }

      &[aria-expanded="true"] {
        &::before {
          content: "\2191";

          border: none;
        }
      }
    }
  }
}