/*
 * Toast
 *
 * Measured from Figma `Toast` (820:1655). Six intents, neutral chrome.
 *
 * THE SURFACE IS NEUTRAL AND THE INTENT IS THE ICON
 *
 * A toast floats over whatever the page happens to be showing, so it sits on
 * `surface/raised` rather than a tinted surface — a coloured panel over unknown
 * content competes with it, and makes Toast and Alert indistinguishable at a
 * glance. Only `--ion-toast-icon` changes per intent; the text stays
 * `text/default` and `text/secondary` throughout.
 *
 * This is the first consumer of `surface/raised`.
 */
.ion-toast {
  --ion-toast-icon: var(--icon-information);

  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  width: 400px;
  max-width: 100%;
  padding: var(--spacing-16);
  background-color: var(--surface-raised);

  /*
   * The border is for dark mode. There `surface/raised` is neutral.800 against
   * a near-black page, and the shadow alone does not separate them.
   */
  border: var(--border-width-default) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--ion-shadow-shadow-lg);
  font-family: var(--font-family-sans);
}

.ion-toast--neutral {
  --ion-toast-icon: var(--icon-secondary);
}

.ion-toast--primary {
  --ion-toast-icon: var(--icon-primary);
}

.ion-toast--success {
  --ion-toast-icon: var(--icon-success);
}

.ion-toast--warning {
  --ion-toast-icon: var(--icon-warning);
}

.ion-toast--error {
  --ion-toast-icon: var(--icon-error);
}

.ion-toast--information {
  --ion-toast-icon: var(--icon-information);
}

.ion-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* Centres against the title's line box rather than the top of the panel. */
  min-height: var(--type-body-line-height);
  color: var(--ion-toast-icon);
}

.ion-toast__icon svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.ion-toast__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-4);
}

.ion-toast__title {
  margin: 0;
  color: var(--text-default);
  font-size: var(--type-body);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-medium);
}

.ion-toast__message {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-regular);
  overflow-wrap: anywhere;
}

/*
 * One action, styled as a quiet text button rather than an instance of Button.
 *
 * Button's smallest size is 32 tall with its own padding and border, which
 * makes a 400px toast noticeably taller for one word. This borrows Button's
 * tertiary colour and nothing else.
 */
.ion-toast__action {
  flex-shrink: 0;
  align-self: flex-start;
  min-height: var(--type-body-line-height);
  padding: 0;
  background: none;
  border: none;
  color: var(--text-link);
  font-family: inherit;
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

@media (hover: hover) {
  .ion-toast__action:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/*
 * 32px around a 20px glyph — WCAG 2.2 SC 2.5.8 asks 24x24 minimum, and the
 * icon alone would fail. Same reasoning as Modal's close and Alert's dismiss.
 */
.ion-toast__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--spacing-32);
  height: var(--spacing-32);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--icon-secondary);
  cursor: pointer;
  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-toast__dismiss svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

@media (hover: hover) {
  .ion-toast__dismiss:hover {
    background-color: var(--surface-hover);
  }
}

.ion-toast__action:focus-visible,
.ion-toast__dismiss:focus-visible {
  outline: var(--border-width-thick) solid var(--ring-focus);
  outline-offset: 2px;
}

/*
 * The region.
 *
 * `pointer-events: none` on the container with `auto` on each toast: the stack
 * spans a corner of the viewport, and without this it would swallow clicks on
 * whatever sits underneath even where no toast is drawn.
 *
 * Column-reverse at the bottom placements so a new toast appears nearest the
 * edge and pushes older ones away, which is the direction the eye is already
 * looking.
 */
.ion-toast-region {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  pointer-events: none;
}

.ion-toast-region > * {
  pointer-events: auto;
}

/* Above Modal's 1000 and Tooltip's 1100: a toast confirming what a dialog just
 * did has to be visible over it.
 *
 * Physical on purpose: `placement` names a corner of the screen —
 * `top-left` — and a corner does not move when the text direction does.
 */
/* stylelint-disable property-disallowed-list */
.ion-toast-region--top-left {
  top: 0;
  left: 0;
}

.ion-toast-region--top-right {
  top: 0;
  right: 0;
}

.ion-toast-region--bottom-left {
  bottom: 0;
  left: 0;
  flex-direction: column-reverse;
}

.ion-toast-region--bottom-right {
  bottom: 0;
  right: 0;
  flex-direction: column-reverse;
}
/* stylelint-enable property-disallowed-list */