.hover\:bg-muted {
    &:hover {
      @media (hover: hover) {
        background-color: var(--muted) !important;
      }
    }
  }
.hover\:bg-muted\/30 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--muted) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--muted) 30%, transparent) !important;
        }
      }
    }
  }
.hover\:bg-muted\/40 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--muted) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--muted) 40%, transparent) !important;
        }
      }
    }
  }
.hover\:bg-muted\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--muted) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--muted) 50%, transparent) !important;
        }
      }
    }
  }
.hover\:bg-muted\/60 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--muted) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--muted) 60%, transparent) !important;
        }
      }
    }
  }
.hover\:bg-primary\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--primary) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--primary) 90%, transparent) !important;
        }
      }
    }
  }
.hover\:bg-secondary\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--secondary) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--secondary) 80%, transparent) !important;
        }
      }
    }
  }
.hover\:bg-transparent {
    &:hover {
      @media (hover: hover) {
        background-color: transparent !important;
      }
    }
  }
.hover\:text-accent-foreground {
    &:hover {
      @media (hover: hover) {
        color: var(--accent-foreground) !important;
      }
    }
  }
.hover\:text-foreground {
    &:hover {
      @media (hover: hover) {
        color: var(--foreground) !important;
      }
    }
  }
.hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline !important;
      }
    }
  }
.focus\:border-ring {
    &:focus {
      border-color: var(--ring) !important;
    }
  }
.focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    }
  }
.focus\:ring-ring\/20 {
    &:focus {
      --tw-ring-color: var(--ring) !important;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent) !important;
      }
    }
  }
.focus-visible\:border-ring {
    &:focus-visible {
      border-color: var(--ring) !important;
    }
  }
.focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    }
  }
.focus-visible\:ring-\[3px\] {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    }
  }
.focus-visible\:ring-destructive\/20 {
    &:focus-visible {
      --tw-ring-color: var(--destructive) !important;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent) !important;
      }
    }
  }
.focus-visible\:ring-ring\/50 {
    &:focus-visible {
      --tw-ring-color: var(--ring) !important;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent) !important;
      }
    }
  }
.focus-visible\:outline-1 {
    &:focus-visible {
      outline-style: var(--tw-outline-style) !important;
      outline-width: 1px !important;
    }
  }
.focus-visible\:outline-2 {
    &:focus-visible {
      outline-style: var(--tw-outline-style) !important;
      outline-width: 2px !important;
    }
  }
.focus-visible\:outline-ring {
    &:focus-visible {
      outline-color: var(--ring) !important;
    }
  }
.focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none !important;
      outline-style: none !important;
    }
  }
.disabled\:pointer-events-none {
    &:disabled {
      pointer-events: none !important;
    }
  }
.disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed !important;
    }
  }
.disabled\:opacity-50 {
    &:disabled {
      opacity: 50% !important;
    }
  }
.has-aria-expanded\:bg-muted\/50 {
    &:has(*[aria-expanded="true"]) {
      background-color: var(--muted) !important;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent) !important;
      }
    }
  }
.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\] {
    &:has(*[data-slot="card-action"]) {
      grid-template-columns: 1fr auto !important;
    }
  }
.aria-invalid\:border-destructive {
    &[aria-invalid="true"] {
      border-color: var(--destructive) !important;
    }
  }
.aria-invalid\:ring-destructive\/20 {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive) !important;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent) !important;
      }
    }
  }
.data-\[orientation\=horizontal\]\:h-px {
    &[data-orientation="horizontal"] {
      height: 1px !important;
    }
  }
.data-\[orientation\=horizontal\]\:w-full {
    &[data-orientation="horizontal"] {
      width: 100% !important;
    }
  }
.data-\[orientation\=horizontal\]\:flex-col {
    &[data-orientation="horizontal"] {
      flex-direction: column !important;
    }
  }
.data-\[orientation\=vertical\]\:h-full {
    &[data-orientation="vertical"] {
      height: 100% !important;
    }
  }
.data-\[orientation\=vertical\]\:w-px {
    &[data-orientation="vertical"] {
      width: 1px !important;
    }
  }
.data-\[size\=lg\]\:size-10 {
    &[data-size="lg"] {
      width: calc(var(--spacing) * 10) !important;
      height: calc(var(--spacing) * 10) !important;
    }
  }
.data-\[size\=sm\]\:size-6 {
    &[data-size="sm"] {
      width: calc(var(--spacing) * 6) !important;
      height: calc(var(--spacing) * 6) !important;
    }
  }
.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
    :is(& > *) {
      &[data-slot="alert-description"] {
        color: var(--destructive) !important;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--destructive) 90%, transparent) !important;
        }
      }
    }
  }
.\*\:data-\[slot\=avatar\]\:ring-2 {
    :is(& > *) {
      &[data-slot="avatar"] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
      }
    }
  }
.\*\:data-\[slot\=avatar\]\:ring-background {
    :is(& > *) {
      &[data-slot="avatar"] {
        --tw-ring-color: var(--background) !important;
      }
    }
  }
.data-\[state\=active\]\:bg-background {
    &[data-state="active"] {
      background-color: var(--background) !important;
    }
  }
.data-\[state\=active\]\:text-foreground {
    &[data-state="active"] {
      color: var(--foreground) !important;
    }
  }
.group-data-\[variant\=default\]\/tabs-list\:data-\[state\=active\]\:shadow-sm {
    &:is(:where(.group\/tabs-list)[data-variant="default"] *) {
      &[data-state="active"] {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
      }
    }
  }