:host {
  display: block;
  overflow: hidden;
}
:host[outline] .anj-tray-item {
  background-color: transparent;
  border: 1px dashed var(--anj-border-dark);
  color: var(--anj-border-dark);
}
:host[outline][active] {
  border-color: var(--anj-highlight);
}
:host[active] .anj-tray-item {
  border-color: var(--anj-highlight);
  opacity: 1;
}
:host:not([outline]) .anj-tray-item {
  background-color: var(--anj-light);
  border-color: var(--anj-border);
  color: var(--anj-dark) !important;
}
:host:not(:last-child) {
  margin-right: 0.5rem;
}
:host .anj-tray-item {
  border: 1px solid transparent;
  border-radius: 0;
  height: 100%;
  opacity: 0.6;
  padding: 0.5rem;
  text-align: left;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  width: 100%;
}
:host .anj-tray-item:focus {
  box-shadow: none;
  outline: none;
  opacity: 1;
}

::slotted(anj-headline) > * {
  color: var(--anj-dark) !important;
}