@use 'sass:map';
@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../sass/abstracts/mixins';

#{$component-prefix}breadcrumbs {
  line-height: 4.5rem;
  height: 4.5rem;

  @media (min-width: map.get($grid-breakpoints, 'md')) {
    line-height: 5rem;
    height: 5rem;
  }

  &--light-grey {
    background-color: $light-grey;
  }

  &--yellow {
    background-color: $yellow-25;
  }

  &--green {
    background-color: $green-25;
  }

  &__item {
    color: $sodra-black-75;

    &:after {
      @include mixins.unity-symbols('chevron-right', 0.75rem);
      margin: 0 0.4rem;
      font-weight: 600;
    }

    &:hover {
      color: $sodra-black-75;
      text-decoration: underline;
    }

    &:last-child:after {
      display: none;
    }
  }
}