@layer components {
  #cookie-banner {
    @apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out bg-[--f-cookie-background] text-[--f-cookie-text];
  }

  .f-cookie-panel-inner {
    @apply max-w-5xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-4 px-6 py-6;
  }

  .f-cookie-text {
    @apply text-base leading-snug;
  }

  .f-cookie-accept,
  .f-cookie-reject {
    @apply px-8 py-4 rounded-md text-sm font-medium transition-colors;
  }

  .f-cookie-accept {
    @apply bg-[--f-cookie-accept-background] text-[--f-cookie-accept-text]
  }

  .f-cookie-reject {
    @apply bg-[--f-cookie-reject-background] text-[--f-cookie-reject-text]
  }
}