.breadcrumbs {
  --semantic-highlight: #005392;
  --semantic-border-highlight: #0c97ff;
  --separator: #191919;
  --inverse: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  &.--inverse {
    .breadcrumb {
      &:hover {
        .breadcrumb-label {
          border-bottom-color: var(--inverse);
        }
      }
      .breadcrumb-label {
        color: var(--inverse);
      }
      &-separator {
        color: var(--inverse);
      }
    }
  }
  .breadcrumb {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0.25px;
    text-decoration: none;
    cursor: pointer;
    &:hover {
      text-decoration: none !important;
      .breadcrumb-label {
        border-bottom: 1.5px solid var(--semantic-highlight);
        opacity: 0.75;
      }
    }
    &:active {
      .breadcrumb-label {
        opacity: 0.5;
      }
    }
    &:focus {
      outline: none;
      .breadcrumb-label {
        outline: 0.125rem solid var(--semantic-border-highlight);
      }
    }
    &.--truncated {
      position: relative;
      height: 1rem;
      &:hover {
        .breadcrumb-overflow-spacing {
          display: block;
          position: absolute;
          width: 0.6875rem;
          height: 0.5rem;
        }
        .breadcrumb-overflow {
          display: block;
          position: absolute;
          top: 1.5rem;
          left: -1rem;
          z-index: 1;
        }
      }
      .breadcrumb-overflow-spacing {
        display: none;
      }
      .breadcrumb-overflow {
        display: none;
      }
    }
    &-label {
      color: var(--semantic-highlight);
    }
    &-separator {
      color: var(--separator);
      font-weight: 600;
      user-select: none;
    }
  }
}

@media screen and (max-width: 600px) {
  .breadcrumbs {
    gap: 0.625rem;
  }
}