@use "../../base/mixins";
@use "../../tokens/color" as *;
@use "../../tokens/spacing" as *;
@use "../../tokens/screens" as *;

.iati-breadcrumb {
  font-weight: 600;
}

.iati-breadcrumb__list {
  @include mixins.unstyled-list();

  display: none;

  & > *:not(:last-child)::after {
    content: "/";
    color: $color-teal-90;
    padding-inline: 0.4em;
  }
}

.iati-breadcrumb__previous {
  display: flex;
  align-items: center;

  .iati-icon {
    height: 1em;
    margin-right: 0.2em;
  }
}

.iati-breadcrumb-link {
  text-decoration: none;

  &[aria-current]:active,
  &[aria-current]:focus,
  &[aria-current]:hover {
    text-decoration: none;
  }
}

@media (min-width: $screen-sm) {
  .iati-breadcrumb__previous {
    display: none;
  }
  .iati-breadcrumb__list {
    display: flex;
  }
}