// RAMEN BREADCRUMBS COMPONENT
//
// N/A
//
//
// Required Component Variables:
//
// $breadcrumbs-color: Default colour of breadcrumb text
// $breadcrumbs-font-size:  Default font size of breadcrumbs
// $breadcrumbs-spacing: Space between breadcrumb and icon
// $breadcrumbs-icon-color: Colour of breadcrumb icon
// $breadcrumbs-icon-size: Size of breadcrumb icon
// $breadcrumb-link-color: Color of breadcrumb link
// $breadcrumb-link-color-hover: Color of breadcrumb link on hover
//

@mixin breadcrumbs {
  display: none;

  @include breakpoint($bp-medium) {
    align-items: center;
    color: $breadcrumbs-color;
    display: flex;
    font-size: $breadcrumbs-font-size;
    justify-content: flex-start;
    width: 100%;
  }
}

@mixin breadcrumbs-item {
  align-items: center;
  display: flex;
  line-height: 1.2;
  padding: 0 ($breadcrumbs-spacing + $breadcrumbs-icon-size) 0
    $breadcrumbs-spacing;
  position: relative;
  text-align: left;

  &:first-child {
    padding-left: 0;
  }
}

@mixin breadcrumbs-link {
  color: $breadcrumb-link-color;
  text-decoration: none;

  &:hover {
    color: $breadcrumb-link-color-hover;
  }
}

@mixin breadcrumbs-icon {
  display: block;
  fill: $breadcrumbs-icon-color;
  height: $breadcrumbs-icon-size;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: $breadcrumbs-icon-size;
}

@mixin breadcrumbs-center {
  justify-content: center;
}

.c-breadcrumbs {
  @include breadcrumbs;

  &__item {
    @include breadcrumbs-item;
  }

  &__icon {
    @include breadcrumbs-icon;
  }

  &__link {
    @include breadcrumbs-link;
  }

  &--center {
    @include breadcrumbs-center;
  }
}