@layer components {
  .panel {
    background-color: var(--color-canvas);
    border: 1px solid var(--panel-border-color, var(--color-ink-lighter));
    border-radius: var(--panel-border-radius, 1em);
    color: var(--color-ink);
    inline-size: var(--panel-size, 40ch);
    max-inline-size: 100%;
    padding: var(--panel-padding, var(--block-space-double));

    @media (prefers-color-scheme: dark) {
      --panel-border-color: var(--color-ink-light);
    }

    .break {
      --break-background-color: var(--color-canvas);
    }
  }

  .panel--dialog {
    --panel-border-radius: 0.3em;
    --panel-padding: var(--block-space-triple) var(--block-space-double);

    border: 1px solid var(--color-theme);
    border-block-end-width: 3px;
  }

  .panel--card {
    --panel-border-radius: 0.3em;
    --panel-size: 100%;

    background-color: var(--color-canvas);
    border: 1px solid var(--color-theme-light);
    border-block-end-width: 3px;

    > *:last-child {
      margin-block-end: 0;
    }
  }

  .panel--hover {
    cursor: pointer;
    transition:
      box-shadow 150ms ease-out,
      translate 150ms ease-out;

    &:hover,
    &:focus-visible {
      box-shadow: var(--shadow-medium);
      translate: 0 -2px;
    }
  }
}