import { css } from 'lit';

/**
 * Hand-authored Tailwind-equivalent utility classes for Shadow DOM.
 * Only includes utilities actually used by the React player components.
 * ~4KB gzipped — avoids bundling all of Tailwind into shadow DOM.
 */
const utilityStyles = css `
  /* ======== Layout & Positioning ======== */
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-x-0 {
    left: 0;
    right: 0;
  }
  .top-0 {
    top: 0;
  }
  .top-2 {
    top: 0.5rem;
  }
  .top-3 {
    top: 0.75rem;
  }
  .left-0 {
    left: 0;
  }
  .left-3 {
    left: 0.75rem;
  }
  .left-4 {
    left: 1rem;
  }
  .right-0 {
    right: 0;
  }
  .right-2 {
    right: 0.5rem;
  }
  .right-3 {
    right: 0.75rem;
  }
  .right-4 {
    right: 1rem;
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-3 {
    bottom: 0.75rem;
  }
  .bottom-4 {
    bottom: 1rem;
  }
  .bottom-20 {
    bottom: 5rem;
  }
  .left-1\\/2 {
    left: 50%;
  }
  .top-1\\/4 {
    top: 25%;
  }

  /* ======== Display & Flex ======== */
  .hidden {
    display: none;
  }
  .flex {
    display: flex;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-block {
    display: inline-block;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-1 {
    flex: 1 1 0%;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-end {
    align-items: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-2 {
    gap: 0.5rem;
  }
  .gap-3 {
    gap: 0.75rem;
  }
  .gap-4 {
    gap: 1rem;
  }
  .gap-6 {
    gap: 1.5rem;
  }
  .gap-8 {
    gap: 2rem;
  }

  /* ======== Sizing ======== */
  .w-full {
    width: 100%;
  }
  .w-4 {
    width: 1rem;
  }
  .w-5 {
    width: 1.25rem;
  }
  .w-8 {
    width: 2rem;
  }
  .w-20 {
    width: 5rem;
  }
  .h-full {
    height: 100%;
  }
  .h-1\\.5 {
    height: 0.375rem;
  }
  .h-4 {
    height: 1rem;
  }
  .h-5 {
    height: 1.25rem;
  }
  .h-6 {
    height: 1.5rem;
  }
  .h-8 {
    height: 2rem;
  }
  .h-20 {
    height: 5rem;
  }
  .min-w-0 {
    min-width: 0;
  }
  .max-w-sm {
    max-width: 24rem;
  }
  .max-w-\\[320px\\] {
    max-width: 320px;
  }
  .max-w-\\[90\\%\\] {
    max-width: 90%;
  }
  .max-w-\\[80\\%\\] {
    max-width: 80%;
  }
  .max-w-\\[70\\%\\] {
    max-width: 70%;
  }
  .max-h-\\[72px\\] {
    max-height: 72px;
  }
  .max-h-\\[80\\%\\] {
    max-height: 80%;
  }
  .min-h-\\[280px\\] {
    min-height: 280px;
  }
  .min-h-\\[300px\\] {
    min-height: 300px;
  }
  .w-\\[280px\\] {
    width: 280px;
  }

  /* ======== Spacing ======== */
  .p-1 {
    padding: 0.25rem;
  }
  .p-2 {
    padding: 0.5rem;
  }
  .p-4 {
    padding: 1rem;
  }
  .p-5 {
    padding: 1.25rem;
  }
  .p-6 {
    padding: 1.5rem;
  }
  .px-2\\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-2\\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .pl-8 {
    padding-left: 2rem;
  }
  .pr-8 {
    padding-right: 2rem;
  }
  .pb-2 {
    padding-bottom: 0.5rem;
  }
  .pb-3 {
    padding-bottom: 0.75rem;
  }
  .pt-2 {
    padding-top: 0.5rem;
  }
  .mt-0\\.5 {
    margin-top: 0.125rem;
  }
  .mt-1 {
    margin-top: 0.25rem;
  }
  .mt-1\\.5 {
    margin-top: 0.375rem;
  }
  .mt-2 {
    margin-top: 0.5rem;
  }
  .mt-3 {
    margin-top: 0.75rem;
  }
  .mb-1 {
    margin-bottom: 0.25rem;
  }
  .ml-0\\.5 {
    margin-left: 0.125rem;
  }
  .-ml-4 {
    margin-left: -1rem;
  }

  /* ======== Typography ======== */
  .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
      monospace;
  }
  .font-medium {
    font-weight: 500;
  }
  .font-semibold {
    font-weight: 600;
  }
  .font-bold {
    font-weight: 700;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }
  .tracking-wider {
    letter-spacing: 0.05em;
  }
  .uppercase {
    text-transform: uppercase;
  }

  /* ======== Colors ======== */
  .text-white {
    color: white;
  }
  .text-white\\/15 {
    color: rgb(255 255 255 / 0.15);
  }
  .text-white\\/50 {
    color: rgb(255 255 255 / 0.5);
  }
  .text-white\\/60 {
    color: rgb(255 255 255 / 0.6);
  }
  .text-white\\/70 {
    color: rgb(255 255 255 / 0.7);
  }
  .text-white\\/80 {
    color: rgb(255 255 255 / 0.8);
  }
  .text-white\\/90 {
    color: rgb(255 255 255 / 0.9);
  }

  /* ======== Backgrounds ======== */
  .bg-black {
    background-color: black;
  }
  .bg-black\\/40 {
    background-color: rgb(0 0 0 / 0.4);
  }
  .bg-black\\/70 {
    background-color: rgb(0 0 0 / 0.7);
  }
  .bg-black\\/80 {
    background-color: rgb(0 0 0 / 0.8);
  }
  .bg-white {
    background-color: white;
  }
  .bg-white\\/10 {
    background-color: rgb(255 255 255 / 0.1);
  }
  .bg-white\\/15 {
    background-color: rgb(255 255 255 / 0.15);
  }
  .bg-slate-400 {
    background-color: rgb(148 163 184);
  }
  .bg-slate-900 {
    background-color: rgb(15 23 42);
  }
  .bg-slate-950 {
    background-color: rgb(2 6 23);
  }
  .bg-red-400 {
    background-color: rgb(248 113 113);
  }

  /* ======== Gradients ======== */
  .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }
  .from-black\\/70 {
    --tw-gradient-from: rgb(0 0 0 / 0.7);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
  }
  .via-black\\/40 {
    --tw-gradient-via: rgb(0 0 0 / 0.4);
    --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(0 0 0 / 0));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
  }
  .from-slate-900 {
    --tw-gradient-from: rgb(15 23 42);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(15 23 42 / 0));
  }
  .via-slate-950 {
    --tw-gradient-via: rgb(2 6 23);
    --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(2 6 23 / 0));
  }
  .to-slate-900 {
    --tw-gradient-to: rgb(15 23 42);
  }

  /* ======== Borders ======== */
  .border {
    border-width: 1px;
  }
  .border-b {
    border-bottom-width: 1px;
  }
  .border-2 {
    border-width: 2px;
  }
  .border-white\\/10 {
    border-color: rgb(255 255 255 / 0.1);
  }
  .border-white\\/15 {
    border-color: rgb(255 255 255 / 0.15);
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-md {
    border-radius: 0.375rem;
  }
  .rounded-lg {
    border-radius: 0.5rem;
  }
  .rounded-xl {
    border-radius: 0.75rem;
  }
  .rounded-full {
    border-radius: 9999px;
  }
  .rounded-\\[4px\\] {
    border-radius: 4px;
  }
  .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  /* ======== Opacity ======== */
  .opacity-0 {
    opacity: 0;
  }
  .opacity-25 {
    opacity: 0.25;
  }
  .opacity-50 {
    opacity: 0.5;
  }
  .opacity-60 {
    opacity: 0.6;
  }
  .opacity-70 {
    opacity: 0.7;
  }
  .opacity-75 {
    opacity: 0.75;
  }
  .opacity-90 {
    opacity: 0.9;
  }
  .opacity-100 {
    opacity: 1;
  }

  /* ======== Effects ======== */
  .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
  .shadow-xl {
    box-shadow:
      0 20px 25px -5px rgb(0 0 0 / 0.1),
      0 8px 10px -6px rgb(0 0 0 / 0.1);
  }
  .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  }
  .backdrop-blur {
    backdrop-filter: blur(8px);
  }
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }

  /* ======== Overflow ======== */
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-auto {
    overflow: auto;
  }

  /* ======== Interaction ======== */
  .pointer-events-none {
    pointer-events: none;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }

  /* ======== Z-Index ======== */
  .z-5 {
    z-index: 5;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-100 {
    z-index: 100;
  }

  /* ======== Transforms ======== */
  .transform {
    transform: var(--tw-transform);
  }
  .scale-50 {
    transform: scale(0.5);
  }
  .scale-75 {
    transform: scale(0.75);
  }
  .scale-90 {
    transform: scale(0.9);
  }
  .scale-100 {
    transform: scale(1);
  }
  .scale-110 {
    transform: scale(1.1);
  }
  .scale-120 {
    transform: scale(1.2);
  }
  .-translate-x-1\\/2 {
    transform: translateX(-50%);
  }
  .translate-x-1\\/2 {
    transform: translateX(50%);
  }
  .rotate-45 {
    transform: rotate(45deg);
  }
  .-rotate-45 {
    transform: rotate(-45deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }

  /* ======== Transitions ======== */
  .transition {
    transition-property:
      color, background-color, border-color, text-decoration-color, fill, stroke, opacity,
      box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .duration-150 {
    transition-duration: 150ms;
  }
  .duration-200 {
    transition-duration: 200ms;
  }
  .duration-300 {
    transition-duration: 300ms;
  }
  .duration-500 {
    transition-duration: 500ms;
  }
  .ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }

  /* ======== Animations ======== */
  .animate-spin {
    animation: _fw-spin 1s linear infinite;
  }
  .animate-pulse {
    animation: _fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes _fw-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes _fw-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  /* ======== Responsive (sm: 640px+) ======== */
  @media (min-width: 640px) {
    .sm\\:flex {
      display: flex;
    }
    .sm\\:left-4 {
      left: 1rem;
    }
    .sm\\:top-4 {
      top: 1rem;
    }
    .sm\\:right-4 {
      right: 1rem;
    }
    .sm\\:gap-6 {
      gap: 1.5rem;
    }
  }

  /* ======== Hover states ======== */
  .hover\\:bg-white\\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
  }
  .hover\\:text-white:hover {
    color: white;
  }
  .hover\\:rotate-90:hover {
    transform: rotate(90deg);
  }

  /* ======== Focus-visible states ======== */
  .focus-visible\\:ring-2:focus-visible {
    box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246));
  }
  .focus-visible\\:ring-offset-2:focus-visible {
    box-shadow:
      0 0 0 2px var(--tw-ring-offset-color, white),
      0 0 0 4px var(--tw-ring-color, rgb(59 130 246));
  }

  /* ======== Group hover ======== */
  .group:hover .group-hover\\:rotate-90 {
    transform: rotate(90deg);
  }
`;

export { utilityStyles };
//# sourceMappingURL=utility-styles.js.map
