@layer lotek {
  /* The element name and the class. The name keeps the position when a
     morph or a `className` from React tears the class away, and the class
     carries it when the component is registered under another name. */
  lt-toast,
  .lt-toast {
    /* The container is fixed in the corner and lets clicks through, so it
       does not block buttons beneath it when it is empty. */
    position: fixed;
    inset-block-end: var(--lt-toast-space, var(--lt-spacing-4));
    inset-inline-end: var(--lt-toast-space, var(--lt-spacing-4));
    z-index: var(--lt-toast-layer, 60);
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-2);
    inline-size: var(
      --lt-toast-width,
      min(24rem, calc(100vw - var(--lt-spacing-8)))
    );
    pointer-events: none;
  }

  .lt-toast__message {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lt-spacing-3);
    padding: var(--lt-toast-padding, var(--lt-spacing-3) var(--lt-spacing-4));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-canvas);
    border: 1px solid var(--lt-color-neutral-border-subtle);
    border-inline-start: var(--lt-spacing-1) solid var(--lt-color-neutral-text);
    border-radius: var(--lt-toast-radius, var(--lt-spacing-1));
    box-shadow: var(--lt-shadow-overlay);
    pointer-events: auto;
  }

  .lt-toast__message[data-color="success"] {
    border-inline-start-color: var(--lt-color-success-text);
  }

  .lt-toast__message[data-color="warning"] {
    border-inline-start-color: var(--lt-color-warning-text);
  }

  .lt-toast__message[data-color="danger"] {
    border-inline-start-color: var(--lt-color-danger-text);
  }

  .lt-toast__close {
    flex: none;
    min-inline-size: var(--lt-spacing-6);
    min-block-size: var(--lt-spacing-6);
    padding: 0;
    font-family: inherit;
    font-size: var(--lt-font-size-l);
    line-height: 1;
    color: var(--lt-color-neutral-text-subtle);
    background: transparent;
    border: 0;
    border-radius: var(--lt-spacing-1);
    cursor: pointer;
  }

  .lt-toast__close:hover {
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-surface);
  }

  .lt-toast__close:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }
}