@use '../../../common/scss/global.scss';

.breadcrumb-item {
  display: inline;
  color: var(--kd-color-text-primary);
  font-weight: var(--kd-font-weight-medium);

  span,
  a {
    padding: 8px;
  }

  a {
    text-decoration: none;
    color: var(--kd-color-text-tertiary);
    white-space: nowrap;
    border-radius: 4px;
    outline: none;
    border: 2px solid transparent;
    transition: border-color 0.2s ease-in-out, border-radius 0.2s ease-in-out,
      color 0.2s ease-in-out;

    &:focus,
    &:active {
      border-color: var(--kd-color-border-focus);
    }

    &:hover {
      color: var(--kd-color-text-tertiary-bold);
    }
  }
}