@use "../../../styles/tokens/base";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";
@use "../../../styles/tools/convert";
@use "../../Container/styles/mixins" as container;
@use "../../../styles/typography/mixins" as typoMixins;
@use "./config";

@mixin base {
  @include typoMixins.list-unstyled;

  padding: space.get("small") 0;
  background-color: var(--color-surface-primary);
  font-weight: bold;
  font-family: base.$font-family;
  font-size: base.$font-size !important;
  line-height: base.$line-height;

  ol {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

@mixin container {
  @include container.base;

  font-size: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@mixin separator {
  content: "";
  display: inline-block;
  font-family: inherit;
  width: convert.to-rem(20px);
  height: convert.to-rem(11px);
  background-image: config.$separator;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: convert.to-rem(6px) convert.to-rem(10px);
}

@mixin separator-white {
  background-image: config.$separator-white;
}

@mixin item {
  display: inline;
  font-size: base.$font-size !important;
  line-height: inherit;
  color: var(--color-text-secondary);
  margin-bottom: 0;

  &:not(:last-child)::after {
    @include separator();
  }

  &::before {
    @include breakpoint.get("sm") {
      display: none;
    }
  }

  &:nth-last-child(2)::after {
    @include breakpoint.get("xs", "down") {
      display: none;
    }
  }

  &:nth-last-child(2) {
    @include breakpoint.get("xs", "down") {
      display: inline-block;
      position: relative;
      padding-left: convert.to-rem(20px);
    }
  }

  &:nth-last-child(2)::before {
    @include breakpoint.get("xs", "down") {
      @include separator();
      transform: rotate(180deg);
      position: absolute;
      top: 50%;
      left: 0;
      width: 0.6rem;
      height: 1rem;
      transform: translateY(-50%) rotate(180deg);
      background-size: contain;
    }
  }

  &:not(:nth-last-child(2)) {
    @include breakpoint.get("xs", "down") {
      display: none;
    }
  }
}

@mixin item-dark {
  &::before,
  &::after {
    @include separator-white();
  }
}

@mixin link {
  color: var(--color-text-default);
  text-decoration: none;
  display: inline;

  &:hover {
    color: var(--color-text-default);
    text-decoration: underline;
  }
}

@mixin link-current {
  color: var(--color-text-secondary);
}