.action-bar {
  padding-inline: var(--space--page-margin-inline);

  background-color: var(--color--background-light);
  border-bottom: var(--border--light);
}

.action-bar__content {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space--small);
  padding-block: var(--space--small);
}

.action-bar__breadcrumb {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  gap: var(--space--xx-small);
  overflow: hidden;
  min-width: 0;
  font-size: var(--font-size--x-small);
  font-weight: var(--font-weight--semibold);
}

.action-bar__breadcrumb-link {
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    text-decoration: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color--primary-dark);
    outline-offset: -2px;
  }
}

.action-bar__breadcrumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space--x-small);
}

@container layout-main (width < 550px) {
  .action-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-index--ceiling);
  }
}