/**
 * @file Breadcrumbs
 * @module Breadcrumbs
 * @overview Styles for Casper breadcrumbs
 * @TODO: expand/solidify styling, here they have styles to support grey and blue (like on the main site)
 */

.breadcrumbs {

  .breadcrumbs-link {
    color: color(text);

    &:hover {
      border-color: currentColor;
    }
  }

  [data-icon="arrow"],
  [data-icon="casper-logo-mark"] {
    fill: color(text);
  }
}

.breadcrumbs--dark {
  
  .breadcrumbs-link {
    color: color(blue);
  }

  [data-icon="arrow"],
  [data-icon="casper-logo-mark"] {
    fill: color(blue);
  }
}

.breadcrumbs-list-item {
  display: inline-block;
  margin: 0 ms(-6);

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

/**
 * @file Breadcrumbs
 * @module Breadcrumbs
 * @overview Styles for Casper breadcrumbs
 */

.breadcrumbs {

  .breadcrumbs-link {
    color: color(text);

    &:hover {
      border-color: currentColor;
    }
  }

  [data-icon="arrow"],
  [data-icon="casper-logo-mark"] {
    fill: color(text);
  }
}

// Styling for Breadcrumbs in the footer
.breadcrumbs--footer {

  .breadcrumbs-link {
    color: color(white);
    opacity: 0.45;
    transition: 0.25s opacity ease;

    &:hover {
      opacity: 1;
    }
  }

  .breadcrumbs-list-item {
    color: color(white);
    vertical-align: middle;

    &:before {
      opacity: 0.45;
    }

    &:first-child {
      margin-top: -5px;
    }
  }

  [data-icon="casper-logo-mark"] {
    fill: color(white);
  }
}

Add styling for footer breadcrumbs
Add styling for footer breadcrumbs
