@import "settings.colors";

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

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

// For placement on a light bg colour
.c-breadcrumb--dark {
  .c-breadcrumb__art {
    fill: $color-grey-660;
  }
  .c-breadcrumb__link {
    color: $color-grey-660;
    &:visited {
      color: $color-grey-660;
    }
    &:hover,
    &:focus,
    &:active {
      color: $color-grey-900;
    }
  }
}

// For placement on a dark bg colour
.c-breadcrumb--light {
  .c-breadcrumb__art {
    fill: $color-white;
  }
  .c-breadcrumb__link {
    color: $color-white;
    &:visited {
      color: $color-white;
    }
    &:hover,
    &:focus,
    &:active {
      color: $color-grey-200;
    }
  }
}

.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);
    display: block;
  }
}

.c-breadcrumb__link {
  text-decoration: none;
  text-transform: uppercase;

  &:visited {
    .c-breadcrumb__text {
      text-decoration: none;
    }
  }
  &:hover,
  &:focus {
    .c-breadcrumb__text {
      text-decoration: underline;
    }
  }
  &:active {
    .c-breadcrumb__text {
      text-decoration: underline;
    }
  }
}
