import { css } from 'lit'

export default css`
  :host {
    display: block;
  }

  .container {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--md-sys-color-on-surface);
  }

  .item {
    font-family: var(--md-sys-typescale-headline-small-font);
    font-weight: var(--md-sys-typescale-headline-small-weight);
    font-size: var(--md-sys-typescale-headline-small-size);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
    line-height: var(--md-sys-typescale-headline-small-height);

    position: relative;
    cursor: pointer;
  }

  .item:focus-within::before,
  .item:hover::before {
    background-color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-extra-large);
    content: '';
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    position: absolute;
  }

  .action-button,
  .link-button {
    outline: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
`
