@import "../../styles/tailwind.css";

@theme {
  /* https://dev.twitch.tv/docs/extensions/designing/#video-overlay-extensions */
  --twitch-vertical-padding: 5rem;
  --twitch-right-padding: 7rem;
  --twitch-left-padding: 0rem;
  --list-fade-padding: 3rem;
}

@layer base {
  html {
    font-size: 10px;

    @media (width >= theme(--breakpoint-sm)) {
      font-size: 12px;
    }

    @media (width >= theme(--breakpoint-md)) {
      font-size: 14px;
    }

    @media (width >= theme(--breakpoint-lg)) {
      font-size: 16px;
    }
  }

  body {
    @apply h-screen w-screen overflow-hidden py-[var(--twitch-vertical-padding)] pr-[var(--twitch-right-padding)] pl-[var(--twitch-left-padding)] font-sans text-alveus-tan;
  }

  #root {
    @apply relative h-full w-full;
  }
}

@layer components {
  .list-fade {
    /* mask image to fade out the list to transparent top and bottom
      using a gradient as image of which the alpha channel will be
      applied to the content of the list */
    mask-image: linear-gradient(
      to bottom,
      /* gradient from 0% to 100% alpha,
           with most of the transition between the overflow and fade distance */
        rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.25) var(--twitch-vertical-padding),
      rgba(0, 0, 0, 1)
        calc(var(--twitch-vertical-padding) + var(--list-fade-padding)),
      /* gradient from 100% to 0% alpha,
           with most of the transition between the overflow and fade distance */
        rgba(0, 0, 0, 1)
        calc(100% - var(--twitch-vertical-padding) - var(--list-fade-padding)),
      rgba(0, 0, 0, 0.25) calc(100% - var(--twitch-vertical-padding)),
      rgba(0, 0, 0, 0) 100%
    );
  }
}
