@use '../common/mixins';
@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements
// separator
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.breadcrumbs {
  text-transform: uppercase;

  ol {
    display: inline-flex;
    flex-wrap: wrap;
  }

  li {
    margin-left: 0;
    padding-top: 0;
  }

  &_item {
    @extend %caption;
    font-weight: variables.$font-bold;
    
    &:not(:first-child) {
      margin-left: .25rem;
      
      &:before {
        content: "/";
        margin-right: .25rem;
        color: variables.$text-alt;
        display: inline-block; // required to remove underline on hover for before element
      }
    }

    a {
      border-radius: variables.$border-radius-sm;
      text-underline-offset: .15em;

      &:hover {
        text-decoration: underline;
      }
    }

    p {
      display: inline-block;
      color: variables.$primary;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// separator
// —————————————————————————————————————————————————————————————————

.breadcrumbs-arrow .breadcrumbs_item:not(:first-child):before {
  content: '';
  border: solid variables.$text-alt;
  border-width: 0 1px 1px 0;
  padding: .2em;
  transform: rotate(-45deg);
  margin-right: .5rem;
  margin-bottom: .1em;
}