@use "system/colors";
@use "system/icon-map";
@use "system/typography";
@use "system/spacing";
@use "system/states";
@use "sass:map";

.ods-breadcrumb {
  @extend %ods-text--size-lima;
  @extend %ods-text--weight-light;

  &__list {
    list-style: none !important;

    .ods-breadcrumb__item {
      display: inline;
    }

    .ods-breadcrumb__item + .ods-breadcrumb__item {
      @extend %ods-margin-left-1;
    }
  }

  &__link {
    margin-left: 6px;
    position: relative;
    padding-left: 0.9em;
    text-decoration: none;
    word-wrap: break-word;

    &::before,
    &:hover::before {
      content: map.get(icon-map.$icons, "chevron-thin-left") !important;
      display: inline-block;
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
      font-size: 1em;
      left: -6px;
      position: absolute;
      top: -0.06em;
    }

    &:visited,
    &--visited {
      color: states.$visited !important;
    }

    &:hover,
    &--hover,
    &:focus,
    &--focus {
      color: states.$hover !important;
      text-decoration: underline;
    }

    &:active,
    &--active {
      color: states.$active !important;
    }

    &--focus,
    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &__active {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-medium;

    margin-left: 6px;
    position: relative;
    padding-left: 0.9em;
    text-decoration: none;
    word-wrap: break-word;

    &::before,
    &:hover::before {
      content: map.get(icon-map.$icons, "chevron-thin-left") !important;
      display: inline-block;
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
      font-size: 1em;
      left: -6px;
      position: absolute;
      top: -0.06em;
    }
  }
}