layer.css

/* This CSS File do not import anywhere, just write atom class for tailwindcss. The tailwindcss intellisense will be work. */

@tailwind components;

@layer components {
  .mask-squircle {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
  }
  .mask {
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .center {
    @apply flex items-center justify-center;
  }

  .shadow-perfect {
    /* https://codepen.io/jh3y/pen/yLWgjpd */
    --tint: 214;
    --alpha: 3;
    --base: hsl(var(--tint, 214) 80% 27% / calc(var(--alpha, 4) * 1%));
    /**
      * Use relative syntax to get to: hsl(221 25% 22% / 40%)
    */
    --shade: hsl(from var(--base) calc(h + 8) 25 calc(l - 5));
    --perfect-shadow: 0 0 0 1px var(--base), 0 1px 1px -0.5px var(--shade),
      0 3px 3px -1.5px var(--shade), 0 6px 6px -3px var(--shade),
      0 12px 12px -6px var(--base), 0 24px 24px -12px var(--base);
    box-shadow: var(--perfect-shadow);
  }

  .perfect-sm {
    --alpha: 1;
  }

  .perfect-md {
    --alpha: 2;
  }

  [theme='dark'] .shadow-perfect {
    --tint: 221;
  }

  .shadow-modal {
    @apply shadow-2xl shadow-stone-300 dark:shadow-stone-900;
  }
  /* Utils */
  .no-animation {
    --btn-focus-scale: 1;
    --animation-btn: 0;
    --animation-input: 0;
  }
}

/* Context menu */
@layer components {
  .shadow-context-menu {
    box-shadow:
      rgba(0, 0, 0, 0.067) 0px 3px 8px,
      rgba(0, 0, 0, 0.067) 0px 2px 5px,
      rgba(0, 0, 0, 0.067) 0px 1px 1px;
  }
}

@layer components {
  .flex {
    display: flex;
    min-width: 0;
  }
}