@use 'sass:math';

.breadcrumbs {
  position: relative;
  padding-top: $gutter;
  padding-bottom: $gutter;

  @include mobile {
    padding-top: $gutter;
    padding-bottom: math.div($gutter, 4);
  }

  h2 {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    margin-right: 0.25em;
  }
  @include above-mobile {
    &::after {
      @include navbar_white_line__pseudo;
      left: -50vw;
      right: -50vw;
      bottom: 0;
      height: 1px;
    }
  }
}
.breadcrumbs--inner {
  @include l-site_width;
  min-height: $logo_height + 1px; // todo: find out why +1?
  &:before {
    content: '📍';
    font-size: 1.5em;
    vertical-align: middle;
  }
}

.breadcrumbs--list {
  display: inline-block;
  font-size: 0;
}

.breadcrumbs--list--item {
  display: inline-block;

  &:last-of-type {
    .breadcrumbs--list--item--link::after {
      display: none;
    }
  }
}

.breadcrumbs--list--item--link {
  font-weight: 300;
  @include font-xs;

  &::after {
    content: '/';
    padding: 0 math.div($gutter, 4);
    display: inline-block;
  }

  &:hover,
  &:focus {
    @include theme(color, var(--theme-color-dark));
    text-decoration: underline;
    outline: none;
  }
}
