app-breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: var(--font-size-small);
  color: rgba(var(--ion-color-medium-rgb), 0.6);
  background: var(--ion-color-light);

  margin-bottom: 24px;

  button[disabled],
  ion-label.separator.busy {
    color: rgba(var(--ion-color-medium-rgb), 0.2);
  }

  button {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    display: inline-flex;

    user-select: none;

    text-transform: capitalize;

    cursor: pointer;

    position: relative;

    transition: color 0.25s ease-in;

    border-radius: 2px;
    background: transparent;

    &:focus {
      background: rgba(var(--ion-color-medium-rgb), 0.1);
    }

    &[disabled] {
      cursor: inherit;
    }

    &.selected:not([disabled]) {
      color: var(--ion-color-dark);

      &::after {
        background: var(--ion-color-dark);
      }
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: var(--ion-color-light);
      height: 1px;

      transition: background 0.25s ease-in;
    }
  }

  ion-label.separator {
    padding: 4px;
    user-select: none;
  }
}
