.cookie {
  position: fixed;
  right: var(--cookie-offset);
  bottom: var(--cookie-offset);
  z-index: 240;

  width: var(--cookie-width);
  max-width: calc(100vw - var(--cookie-offset) * 2);
  padding: var(--cookie-padding);

  border-radius: var(--cookie-radius);
  background: var(--color-surface);
  box-shadow:
    0 0 0 1px var(--cookie-edge),
    0 10px 26px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.07);

  opacity: 0;
  translate: 0 14px;
  scale: 0.98;
  transition:
    opacity 300ms var(--ease),
    translate 420ms var(--ease),
    scale 420ms var(--ease);
}

.cookie.is-open {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.cookie__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-value);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "opsz" var(--optical-body);
}

.cookie__text {
  margin-top: var(--gap-label-value);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
}

.cookie__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.cookie__actions .button {
  flex: 1 1 0;
}

@media (max-width: 560px) {
  .cookie {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie {
    transition: none;
  }
}