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

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

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

.breadcrumbs {

  ol {
    display: inline-flex;
    flex-wrap: wrap;
    padding-inline-start: 0;
    margin-block-end: 0;
  }

  li {
    margin-inline-start: 0;
    padding-block-start: 0;
  }

  &_item {
    text-transform: variables.$button-transform;
    font-weight: variables.$button-weight;
    font-size: variables.$button-sm-size;
    
    &:not(:first-child) {
      margin-inline-start: .25rem;
      
      &:before {
        content: "/";
        margin-inline-end: .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-inline-end: .5rem;
  margin-block-end: .1em;
}