/*
  The emergency notice: an amber status light in the sidebar footer and the
  biller bar that opens a popover, a beacon on the mobile "More" tab, and a
  callout atop the drawer. Nothing floats over the page until someone asks.
*/

@layer modules {
  .emergency-light__icon {
    position: relative;
    display: inline-flex;
  }

  .emergency-light--side {
    anchor-name: --emergency-light-side;

    .emergency-light__icon {
      color: var(--color-amber-600);
    }

    .emergency-light__label {
      color: var(--color-amber-800);
    }

    .emergency-beacon {
      inset-block-start: calc(50% - 0.75rem);
      inset-inline: calc(50% + 0.375rem) auto;
    }
  }

  .terminal__link.emergency-light--bar {
    anchor-name: --emergency-light-bar;
    color: var(--color-amber-800);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--color-amber-50);
        color: var(--color-amber-900);
      }
    }
  }

  .emergency-beacon {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-amber-600);
    box-shadow: 0 0 0 2px var(--color-white);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: var(--color-amber-600);
      animation: ping 1.8s var(--ease-out) infinite;
    }

    .emergency-light--bar &,
    .emergency-light--more & {
      inset-block-start: -0.125rem;
      inset-inline-end: -0.125rem;
    }
  }

  .emergency-light:has(+ :popover-open) .emergency-beacon::after {
    animation: none;
  }

  .emergency-callout {
    margin-block-end: 0.75rem;
  }

  .emergency-notice {
    --callout-accent: var(--color-amber-600);

    width: min(20rem, calc(100vw - 2rem));
    padding: 0.875rem 1rem 0.875rem 0.75rem;
    border: 0;
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-amber-800);
    background-color: var(--color-white);
    box-shadow: var(--bevel-popover);
    opacity: 0;
    scale: 0.96;
    transition: opacity 150ms var(--ease-out), scale 150ms var(--ease-out), display 150ms allow-discrete, overlay 150ms allow-discrete;

    &:popover-open {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 0.75rem;
      opacity: 1;
      scale: 1;

      @starting-style {
        opacity: 0;
        scale: 0.96;
      }
    }
  }

  @supports (position-area: center) {
    .emergency-notice {
      inset: auto;
      margin: 0.5rem;
      position-try-fallbacks: flip-block, flip-inline;
    }

    .emergency-notice--side {
      margin-inline-start: 1rem;
      position-anchor: --emergency-light-side;
      position-area: inline-end span-block-start;
      transform-origin: bottom left;
    }

    .emergency-notice--bar {
      position-anchor: --emergency-light-bar;
      position-area: block-end span-inline-start;
      transform-origin: top right;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .emergency-beacon::after {
      animation: none;
    }
  }
}