@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-breadcrumbs {
  border-radius: 0.1px;

  &__list {
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    list-style: none;
  }

  &__item {
    display: flex;

    + .tna-breadcrumbs__item {
      &::before {
        content: "\203A";
        content: "\203A" / "";

        margin: 0 spacing.space(0.75);

        display: inline-block;

        vertical-align: baseline;
      }
    }

    &--expandable {
      display: none;

      @include media.on-mobile {
        display: inline-block !important;
      }
    }
  }

  &__link {
    display: inline-block;

    &,
    &:link,
    &:visited {
      @include colour.colour-font("font-base");
    }
  }

  button#{&}__link {
    height: 100%;
    margin: 0;
    padding: 0;

    appearance: none;

    line-height: inherit;

    background-color: transparent;

    border: none;
    border-radius: 0.1px;

    cursor: pointer;

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

      background-color: transparent;
    }
  }

  @include media.on-mobile {
    &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {
      display: none;
    }
  }

  @include colour.on-high-contrast {
    &__link {
      &,
      &:link,
      &:visited {
        @include colour.colour-font("link");
      }
    }
  }
}