@layer components {
  /* Bar
  /* ------------------------------------------------------------------------ */

  .bar:not(.bar--gate) {
    background-color: var(--color-canvas);
    border-block-start: 1px solid var(--color-ink-lighter);

    .bar__placeholder .btn--plain {
      --btn-padding: 0.4em 0.9em;
      --btn-border-radius: 99rem;

      color: var(--color-ink);
      font-size: var(--text-small);
      font-weight: 400;
      opacity: 1;
      text-transform: none;

      @media (any-hover: hover) {
        &:hover {
          background-color: var(--tint-ink-5);
          color: var(--color-ink);
        }
      }
    }
  }

  /* Trays
  /* ------------------------------------------------------------------------ */

  .tray--panel,
  .tray {
    --color-terminal-bg: var(--color-canvas);

    .tray__dialog {
      --tray-duration: var(--duration-slow);
      --tray-item-height: 3.5rem;
      --tray-radius: var(--radius-lg);

      opacity: 0;
      transition-property: background-color, box-shadow, inset-block-end, opacity, translate;
      translate: 0 2rem;
    }

    .tray__dialog[open] {
      background-color: var(--color-canvas);
      border-radius: var(--tray-radius);
      box-shadow: var(--shadow-modal);
      color: var(--color-ink);
      opacity: 1;
      overflow: clip;
      translate: none;

      /* At 800 a quarter of the width cuts every title, so an open tray takes at least 20rem, growing away from the edge. */
      @media (min-width: 800px) {
        inline-size: max(100%, 20rem);
      }
    }

    @media (min-width: 800px) {
      &.tray--pins .tray__dialog[open] {
        inset-inline-end: auto;
      }

      &.tray--notifications .tray__dialog[open] {
        inset-inline-start: auto;
      }
    }

    .tray__dialog:focus-visible {
      outline: 0;
    }

    .tray__item {
      font-size: var(--text-normal);
    }

    .tray__dialog:not([open]) .tray__item {
      opacity: 0;
      visibility: hidden;
    }

    .tray__dialog:not([open]) .skeleton {
      visibility: hidden;
    }

    .tray__item--pin .tray__remove-pin-btn {
      --btn-background: transparent;

      background-color: transparent;
      inset: 50% var(--inline-space-half) auto auto;
      translate: 0 -50%;
    }

    .tray__toggle {
      display: grid;
      place-items: center;
      position: relative;
    }

    @media (min-width: 800px) {
      .tray__dialog:not([open]):has(.tray__item:not(.tray__item--hat)) ~ .tray__toggle {
        block-size: auto;
        translate: none;
      }

      .tray__dialog:not([open]):has(.tray__item--notification) ~ .tray__toggle {
        opacity: 1;
      }
    }

    @media (max-width: 799px) {
      .tray__dialog:not([open]):has(.tray__item--notification) ~ .tray__toggle::after {
        content: none;
      }

      .tray__dialog:not([open]) ~ .tray__toggle .tray__toggle-btn {
        aspect-ratio: 1;
        padding: 0.6em;
      }
    }

    .tray__toggle-btn {
      --btn-background: transparent;
      --btn-border-size: 0;
      --btn-color: var(--color-ink);
      --btn-padding: 0.4em 0.9em;

      font-weight: 400;
      max-inline-size: max-content;
      opacity: 1;
      position: relative;
      white-space: nowrap;
    }

    @media (any-hover: hover) {
      .tray__toggle:hover .tray__toggle-btn {
        --btn-background: var(--tint-ink-5);
      }
    }

    .tray__dialog[open] ~ .tray__toggle .tray__toggle-btn {
      --btn-background: var(--color-ink);
      --btn-color: var(--color-ink-inverted);

      kbd {
        border-color: currentColor;
        color: inherit;
      }
    }

    .tray__dialog:not([open]):has(.tray__item--notification) ~ .tray__toggle .tray__toggle-btn::after {
      background-color: oklch(var(--lch-red-medium));
      block-size: 1ch;
      border-radius: 50%;
      content: "";
      inline-size: 1ch;
      inset: 0.15em 0.15em auto auto;
      position: absolute;
    }

    .tray__toggle-text {
      font-size: var(--text-small);
      text-transform: none;
    }
  }

  .tray__header {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding-block: var(--block-space-half);
    padding-inline: var(--inline-space-double) var(--inline-space-half);

    .btn--circle {
      --btn-size: 1.75rem;
    }

    .tray__dialog:not([open]) & {
      display: none;
    }
  }

  .tray__title {
    font-size: var(--text-medium);
    font-weight: 800;
    margin: 0;
  }
}