@use "../../variables/a11y" as a11yVars;
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-sidebar {
  width: 100%;

  @include typography.font-size(16);

  &__heading {
  }

  &__items,
  &__item-children {
    display: flex;
    flex-direction: column;
    gap: spacing.space(0.25);

    list-style: none;
  }

  &__items {
    padding-top: max(
      spacing.space(0.5),
      #{a11yVars.$focus-outline-total-width}
    );
  }

  &__item {
  }

  &__item-children {
  }

  &__item-child {
  }

  &__link {
  }

  /*
   * ------------------------------------------
   * Contents
   * ------------------------------------------
   */
  &--contents &__item-children {
    margin-top: spacing.space(0.25);
    padding-left: spacing.space(2);

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

  /*
   * ------------------------------------------
   * Sections
   * ------------------------------------------
   */
  &--sections &__items {
    line-height: 1.35;
  }

  &--sections &__link {
    padding: spacing.space(0.25) spacing.space(0.5);

    display: block;
  }

  &--sections &__item--current &__link {
    @include colour.accent;

    @include borders.rounded-border;
  }

  /*
   * ------------------------------------------
   * Pages
   * ------------------------------------------
   */
  &--pages &__item--current {
    padding-left: spacing.space(0.75);

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

  &--pages &__item--current > &__link {
    @include typography.main-font-weight-bold;
  }

  &--pages &__item-children {
    gap: 0;
  }

  /*
   * ------------------------------------------
   * Dashed items
   * ------------------------------------------
   */
  &--contents &__items,
  &--pages &__item-children {
    padding-left: spacing.space(1.5);
  }

  &--contents &__item,
  &--contents &__item-child,
  &--pages &__item-child {
    list-style: "—  " outside;

    &::marker {
      @include colour.colour-font("font-light");
    }
  }

  /*
   * ------------------------------------------
   * Sticky
   * ------------------------------------------
   */
  &--sticky {
    max-height: 100vh;
    max-height: 100dvh;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    position: sticky;
    top: 0;
  }

  @include media.on-small {
    &--static-on-mobile,
    &--static-on-small {
      max-height: none;

      position: static;
    }
  }

  @include media.on-tiny {
    &--static-on-mobile,
    &--static-on-tiny {
      max-height: none;

      position: static;
    }
  }

  &--sticky &__items {
    margin: 0;
    padding-bottom: a11yVars.$focus-outline-total-width;

    overflow-y: auto;

    flex: 1;
  }

  &--sticky#{&}--contents &__items,
  &--sticky#{&}--pages &__items {
    padding-right: spacing.space(1);
  }

  &--sticky#{&}--sections &__items,
  &--sticky#{&}--pages &__items {
    width: calc(100% - #{a11yVars.$focus-outline-total-width});
    padding-right: a11yVars.$focus-outline-total-width;
    padding-left: a11yVars.$focus-outline-total-width;

    box-sizing: content-box;

    position: relative;
    left: -#{a11yVars.$focus-outline-total-width};
  }
}