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

.tna-details {
  margin-top: spacing.space(1);

  &:first-child {
    margin-top: 0;
  }

  &__details {
  }

  &__summary {
    width: fit-content;
    padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
      spacing.space(2.75);

    display: block;

    position: relative;
    z-index: 2;

    @include colour.colour-font("link");
    text-decoration: underline;
    text-decoration-thickness: 1.5px;

    list-style: none;

    border-radius: 0.1px;

    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "";

      width: 0;
      height: 0;

      position: absolute;
      top: calc(50% - 0.5rem);
      left: 0.75rem;

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

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

  &__content {
    padding: 0 0 0 spacing.space(2.75);
  }

  &__details[open] &__summary {
    &::before {
      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);

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

  &__details[open] &__content {
    position: relative;
    z-index: 1;

    &::before {
      content: "";

      display: block;

      position: absolute;
      inset: 0 auto 0 calc(1.5rem - #{math.div(borders.$thick-border-width, 2)});

      @include colour.thick-keyline(left);
    }
  }

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

        width: auto;
        height: auto;

        top: calc(50% - 0.5rem);

        line-height: 1rem;

        border: none;
      }
    }

    &__details[open] &__summary {
      &::before {
        content: "\2193";

        border: none;
      }
    }
  }
}