@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";

body {
  width: 450px; /* max: 1000px */
  @apply bg-ctp-base font-lexend text-base text-ctp-text;
}

@theme {
  --font-lexend: "Lexend", sans-serif;
  --animate-zoom-in: zoom-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  @keyframes zoom-in {
    from {
      transform: scale(0.95);
    }
    to {
      transform: scale(1);
    }
  }
}

@layer components {
  .logo-picker {
    mask: var(--icon) no-repeat;
    mask-size: 100% 100%;
    background-color: currentColor;
    @apply h-16 w-20 text-(--ctp-accent);
  }

  .slider {
    @apply ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg bg-ctp-surface1 p-1 duration-500 ease-in-out peer-checked:bg-(--ctp-accent) after:rounded-lg after:bg-ctp-text after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6 peer-checked:after:bg-ctp-mantle;
  }

  .slider.big {
    @apply h-8 w-14 after:h-6 after:w-6;
  }

  .slider.small {
    @apply after:h-3 after:w-3;
  }

  #flavours button {
    @apply bg-ctp-surface0;
  }

  #flavours button.active {
    @apply bg-(--ctp-accent)/40;
  }

  #navbar a.active {
    @apply bg-(--ctp-accent)/40;
  }

  #navbar a {
    @apply bg-ctp-surface0;
  }

  #card {
    @apply flex w-full flex-col items-center justify-center rounded-3xl bg-ctp-mantle bg-linear-to-b p-6 shadow-xl outline-2 outline-(--ctp-accent) outline-solid;
  }

  #card h1 {
    @apply bg-linear-to-r from-ctp-blue to-ctp-teal bg-clip-text text-5xl font-bold text-transparent;

    &.ctp {
      background-image: linear-gradient(
        to right,
        var(--color-ctp-red),
        var(--color-ctp-peach),
        var(--color-ctp-yellow),
        var(--color-ctp-green),
        var(--color-ctp-blue),
        var(--color-ctp-mauve)
      );
    }
  }

  #card h2 {
    @apply text-4xl font-semibold text-(--ctp-accent);
  }

  #card h3 {
    @apply text-2xl font-medium;
  }

  #card p {
    @apply font-bold;
  }

  .highlight {
    @apply bg-ctp-surface2;
  }

  button#toggle {
    @apply rounded-xl px-4 py-2 text-xl font-bold text-ctp-base;
  }

  button.small {
    @apply rounded-lg px-2 py-1 text-sm font-bold;
  }

  button.xsmall {
    @apply rounded-md px-1 py-0.5 text-xs;
  }

  button {
    @apply transition duration-500 ease-in-out;
  }

  #palette {
    @apply mb-8 grid auto-rows-auto grid-cols-7 justify-items-center gap-4;
  }

  #palette > * {
    @apply h-6 w-6 rounded-full;
  }

  .current {
    @apply outline-ctp-overlay0 outline-solid;
  }

  .navbutton-left {
    @apply rounded-l-xl py-2 pr-2 pl-4 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
  }

  .navbutton-center {
    @apply p-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
  }

  .navbutton-right {
    @apply rounded-r-xl py-2 pr-4 pl-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
  }

  div[title] {
    @apply relative;
  }

  div[title]:hover::after {
    @apply absolute bottom-full left-1/2 bg-ctp-surface0 whitespace-nowrap text-ctp-text;
    content: attr(title);
    transform: translateX(-50%);
    padding: 0.5rem;
    border-radius: 0.25rem;
  }
}