@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

.qpp-c-breadcrumbs {
  line-height: v.$line-height-lg;
  font-size: v.$font-size-14;
  font-family: v.$font-rubik;
  color: v.$gray-80;

  .qpp-c-breadcrumbs__list {
    @include m.unstyled-list;
    margin-left: 0;
    display: block;
  }

  .qpp-c-breadcrumbs__list-item {
    display: inline-block;
    white-space: nowrap;

    &::after {
      display: inline-block;
      margin-left: v.$spacing-8;
      margin-right: v.$spacing-8;
      transform: translateY(3px) rotate(20deg);
      border-right: 0.1em solid fade-out(v.$gray-80, 0.7);
      height: 0.9em;
      content: '';
    }

    &.qpp-c-breadcrumbs__list-item--current::after {
      content: '';
      margin-left: v.$spacing-0;
      margin-right: v.$spacing-0;
    }
  }

  .qpp-c-breadcrumbs__link {
    color: v.$gray-80;
    text-decoration: none;
    text-underline-offset: f.rem(4px);
    text-decoration-thickness: f.rem(1px);

    &:not(.qpp-c-button) {
      &:focus {
        @include m.link-focus;
      }
    }

    &:hover {
      > span {
        text-decoration-thickness: f.rem(2px);
      }
    }

    > span {
      text-decoration: underline;
    }
  }

  &--return {
    .qpp-c-breadcrumbs__link {
      color: v.$blue-60;
      font-weight: v.$font-medium;
      > svg {
        @include m.inline-icon-lg;
        display: inline-block;
        margin-left: -0.7em;
        margin-right: -0.1em;
        margin-top: -0.415em;
        height: 1.715em;
        width: 1.715em;
      }
      > span {
        text-decoration: none;
      }
    }
  }
}

.qpp-c-breadcrumbs--light {
  color: v.$white;

  .qpp-c-breadcrumbs__link {
    color: v.$white;
  }

  .qpp-c-breadcrumbs__list-item {
    &::after {
      border-right: 0.1em solid fade-out(v.$white, 0.6);
    }
  }
}