@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-breadcrumb {
  display: inline-block;
  @include font-gm-sans;
  padding-top: rem(12);
  line-height: line-height(12, 12);
  font-size: rem(12);
  letter-spacing: rem(1);
}

.c-breadcrumb__bullet {
  margin: 0 rem(2) rem(2) 0;
  display: inline-block;
  vertical-align: middle;

  .c-breadcrumb__art {
    width: rem(6);
    height: rem(6);
    fill: $color-grey-660;
    display: block;
  }
}

.c-breadcrumb__link {
  text-decoration: none;
  text-transform: uppercase;
  color: $color-grey-660;

  &:visited {
    color: $color-grey-660;
    .c-breadcrumb__text {
      text-decoration: none;
    }
  }
  &:hover,
  &:focus {
    .c-breadcrumb__text {
      text-decoration: underline;
    }
  }
  &:active {
    color: $color-grey-900;
    .c-breadcrumb__text {
      text-decoration: underline;
    }
  }
}
