@layer components {
  /* Price alert dialog: centred on wide screens, a sheet from the bottom
     on phones. Head and foot stay put; the body scrolls when it must.
  /* ------------------------------------------------------------------------ */

  html:has(.alert-dialog[open]) {
    overflow: hidden;
  }

  .alert-dialog {
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    margin: auto;
    background-color: var(--color-surface);
    box-shadow: 0 0 0 1px oklch(var(--lch-black) / 6%), 0 12px 32px oklch(var(--lch-black) / 14%);
    color: var(--color-ink);
    inline-size: min(36rem, calc(100% - 2rem));
    max-block-size: calc(100dvh - 2rem);

    &[open] {
      display: flex;
      flex-direction: column;
    }

    &:has(.alert-target:not([hidden])) {
      inline-size: min(42rem, calc(100% - 2rem));
    }

    &::backdrop {
      background-color: oklch(var(--lch-gray-950) / 40%);
    }

    @media (width < 640px) {
      border-radius: 1.25rem 1.25rem 0 0;
      margin: auto 0 0;
      inline-size: 100%;
      max-block-size: calc(100dvh - 0.75rem);
      max-inline-size: 100%;

      &:has(.alert-target:not([hidden])) {
        inline-size: 100%;
      }
    }
  }

  .alert-dialog__head {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 0.9rem 1.5rem;
    border-block-end: var(--border);
    gap: 0.75rem;

    @media (width < 640px) {
      padding: 0.75rem 0.75rem 0.75rem 1rem;
    }
  }

  .alert-dialog__thumb {
    flex-shrink: 0;
    padding: 0.2rem;
    border: var(--border);
    border-radius: var(--border-radius);
    block-size: 2.75rem;
    inline-size: 2.75rem;
    object-fit: contain;
  }

  .alert-dialog__heading {
    flex-grow: 1;
    min-inline-size: 0;
  }

  .alert-dialog__title {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
  }

  .alert-dialog__product {
    color: var(--color-tag);
    font-size: 0.8125rem;
  }

  .alert-dialog__price {
    white-space: nowrap;
  }

  .alert-dialog__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    block-size: 2.25rem;
    color: var(--color-tag);
    inline-size: 2.25rem;

    &:hover {
      background-color: var(--color-shade);
      color: var(--color-ink);
    }
  }

  .alert-dialog__body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.25rem;
    overflow-y: auto;

    @media (width < 640px) {
      padding: 1rem;
      gap: 0.9rem;
    }
  }

  .alert-dialog__modes {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0;
    border: 0;
  }

  .alert-dialog__question {
    padding: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-block-end: 1.25rem;

    @media (width < 640px) {
      font-size: 1.1875rem;
      margin-block-end: 0.9rem;
    }
  }

  .alert-mode {
    display: flex;
    align-items: center;
    padding: 0.95rem 1rem;
    border: var(--border);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.75rem;

    &:first-of-type {
      border-radius: 0.9rem 0.9rem 0 0;
    }

    &:last-of-type {
      border-radius: 0 0 0.9rem 0.9rem;
      border-block-start: 0;
    }

    &:has(input:checked) {
      background-color: var(--color-positive-subtle);
    }

    input {
      accent-color: var(--color-primary);
      block-size: 1.1rem;
      inline-size: 1.1rem;
    }

    @media (width < 640px) {
      padding-block: 0.7rem;
    }
  }

  /* "Velg pris": amount, chart and suggestions
  /* ------------------------------------------------------------------------ */

  .alert-target {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    &[hidden] {
      display: none;
    }

    @media (width < 640px) {
      gap: 0.55rem;
    }
  }

  .alert-target__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9375rem;
    gap: 0.4rem 0.5rem;
  }

  .alert-target__group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  .alert-target__field {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-separator);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);

    &:focus-within {
      border-color: oklch(var(--lch-orange-600));
      box-shadow: 0 0 0 3px oklch(var(--lch-orange-600) / 18%);
    }

    input {
      padding: 0.45rem 0.25rem 0.45rem 0.7rem;
      border: 0;
      background: none;
      font-size: var(--text-lg);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      inline-size: 6.5rem;
      outline: none;

      &::-webkit-inner-spin-button {
        display: none;
      }
    }

    span {
      color: var(--color-tag);
      font-size: var(--text-sm);
      padding-inline-end: 0.7rem;
    }

    &:has([aria-invalid="true"]) {
      border-color: var(--color-negative);
      box-shadow: 0 0 0 3px oklch(var(--lch-red-600) / 12%);

      input {
        color: oklch(var(--lch-red-700));
      }
    }
  }

  /* The icon box is one text line tall, so the icon centres on the first
     line however the message wraps. */
  .alert-target__error {
    display: flex;
    align-items: flex-start;
    color: oklch(var(--lch-red-700));
    font-size: var(--text-sm);
    font-weight: 500;
    gap: 0.35rem;
    line-height: 1.25rem;
    margin-block-start: -0.25rem;

    .material-icons {
      display: flex;
      align-items: center;
      block-size: 1.25rem;
      font-size: 1.125rem;
    }

    @media (width < 640px) {
      margin-block-start: -0.1rem;
    }
  }

  .alert-target__hint {
    display: flex;
    align-items: center;
    color: var(--color-tag);
    font-size: var(--text-xs);
    gap: 0.3rem;

    .material-icons {
      font-size: var(--text-base);
    }
  }

  /* The price chart, where a tap or a drag sets the amount */
  .alert-chart {
    --price-chart-height: 170px;

    cursor: ns-resize;
    touch-action: none;
    user-select: none;

    @media (width < 640px) {
      --price-chart-height: 130px;
    }
  }

  .alert-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;

    @media (width < 640px) {
      flex-wrap: nowrap;
      gap: 0.35rem;
    }
  }

  .alert-suggestion {
    padding: 0.35em 0.75em;
    border: 1px solid var(--color-separator);
    border-radius: 2em;
    background-color: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;

    &[aria-pressed="true"] {
      border-color: oklch(var(--lch-orange-600));
      background-color: oklch(var(--lch-orange-50));
      color: var(--color-warning-strong);
    }

    b {
      font-weight: 700;
    }

    @media (hover: hover) {
      &:hover {
        border-color: oklch(var(--lch-orange-600));
        color: var(--color-warning-strong);
      }
    }

    @media (width < 640px) {
      flex: 1 1 0;
      font-size: var(--text-xs);
      min-inline-size: 0;
      padding-inline: 0.35em;
      text-align: center;
    }
  }

  .alert-suggestion__short {
    display: none;
  }

  @media (width < 640px) {
    .alert-suggestion__long {
      display: none;
    }

    .alert-suggestion__short {
      display: inline;
    }
  }

  /* Repeat switch and actions
  /* ------------------------------------------------------------------------ */

  .alert-recurring {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border: var(--border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 1rem;

    @media (width < 640px) {
      padding-block: 0.7rem;
    }
  }

  .alert-recurring__switch {
    position: relative;
    flex-shrink: 0;
    border-radius: 1rem;
    margin: 0;
    appearance: none;
    background-color: var(--color-separator);
    block-size: 1.5rem;
    cursor: pointer;
    inline-size: 2.6rem;
    transition: background-color 150ms;

    &::after {
      position: absolute;
      border-radius: 50%;
      background-color: var(--color-surface);
      block-size: 1.2rem;
      box-shadow: 0 1px 2px oklch(var(--lch-black) / 25%);
      content: "";
      inline-size: 1.2rem;
      inset-block-start: 0.15rem;
      inset-inline-start: 0.15rem;
      transition: transform 150ms;
    }

    &:checked {
      background-color: var(--color-primary);

      &::after {
        transform: translateX(1.1rem);
      }
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .alert-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.9rem 1.5rem;
    border-block-start: var(--border);
    gap: 0.5rem;

    .action-button {
      padding: 0.6em 1.1em;
      font-size: 0.9375rem;
    }

    @media (width < 640px) {
      padding: 0.75rem 1rem;
    }
  }

  .alert-dialog__off-form {
    margin-inline-start: auto;
  }

  .alert-dialog__off {
    color: var(--color-tag);
    font-size: var(--text-sm);
    font-weight: 500;

    &:hover {
      color: var(--color-negative);
      text-decoration: underline;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .alert-recurring__switch,
    .alert-recurring__switch::after {
      transition: none;
    }
  }
}