/* Connectivity banners — offline mode + schedule update prompts */

@layer components {
  .connectivity-banner {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) clamp(1rem, 3vw, 2rem);
    font-size: 0.875rem;
    font-weight: 500;

    &[hidden] {
      display: none;
    }
  }

  .connectivity-banner--offline {
    background: color-mix(in oklch, oklch(var(--lch-golden)) 15%, var(--color-canvas));
    color: oklch(var(--lch-golden));
    border-block-end: 1px solid color-mix(in oklch, oklch(var(--lch-golden)) 30%, transparent);
  }

  .connectivity-banner--update {
    background: color-mix(in oklch, oklch(var(--lch-laser)) 15%, var(--color-canvas));
    color: oklch(var(--lch-laser));
    border-block-end: 1px solid color-mix(in oklch, oklch(var(--lch-laser)) 30%, transparent);
  }

  .connectivity-banner__action {
    margin-inline-start: auto;
    padding: 0.25em 0.75em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--lch-laser));
    background: color-mix(in oklch, oklch(var(--lch-laser)) 20%, transparent);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-height: var(--touch-min);

    &:hover {
      background: color-mix(in oklch, oklch(var(--lch-laser)) 30%, transparent);
    }
  }

  .connectivity-banner__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }
  }
}