@import '../../styles/common';

.Breadcrumb {
  @include text-style-body;
  @include text-emphasis-subdued;
  @include unstyled-button;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: control-height();
  min-width: control-height();
  color: var(--p-text-subdued);
  text-decoration: none;
  margin: 0;
  padding: var(--p-space-05);
  border-radius: var(--p-border-radius-1);
  border: var(--p-border-width-1) solid var(--p-border-neutral-subdued);
  @include focus-ring($border-width: 1px);

  &:hover {
    background-color: var(--p-surface-hovered);
  }

  &:active {
    background-color: var(--p-surface-pressed);
  }

  &:hover,
  &:active {
    color: var(--p-text);
    text-decoration: none;

    .Icon {
      @include recolor-icon(var(--p-icon-pressed));
    }
  }

  &:focus {
    outline: none;
  }

  &:focus:not(:active) {
    @include focus-ring($style: 'focused');
  }
}

.Content {
  @include truncate;
  position: relative;
}

.Icon {
  --pc-breadcrumbs-icon-size: 20px;
  @include recolor-icon(var(--p-icon));
  width: var(--pc-breadcrumbs-icon-size);
  height: var(--pc-breadcrumbs-icon-size);
  margin: calc(-0.5 * var(--pc-breadcrumbs-icon-size)) 0
    calc(-0.5 * var(--pc-breadcrumbs-icon-size)) calc(-1 * var(--p-space-2));
  margin: 0;
}