@tailwind components;

@layer components {
  [data-theme="blue"] {
    [data-sidebar="sidebar-wrapper"] {
      background: none;
      background-image: linear-gradient(
        to bottom,
        #00afe5 0%,
        #0099cc 50%,
        #0088b3 100%
      ) !important;
      border: none;
    }
    [data-sidebar="sidebar"],
    [data-sidebar="content"] {
      background: transparent !important;
    }
    [data-sidebar="menu-item"] * {
      color: #fff !important;
    }
    [data-sidebar="menu-item"] *:hover {
      background: none !important;
      color: #fff !important;
    }
    [data-sidebar="trigger"]:hover,
    [data-sidebar="menu-button"]:hover,
    [data-sidebar="menu-sub-button"]:hover {
      background: rgba(0, 0, 0, 0.1) !important;
    }
    [data-sidebar="trigger"][data-matched="true"],
    [data-sidebar="menu-button"][data-matched="true"],
    [data-sidebar="menu-sub-button"][data-matched="true"] {
      background: rgba(0, 0, 0, 0.2) !important;
    }
    [data-sidebar="trigger"] > svg {
      color: #fff !important;
    }
    [data-radix-popper-content-wrapper] > * {
      color: #0a0a0a !important;
      background: #fff !important;
    }
    [data-radix-popper-content-wrapper] > *:hover {
      color: #0a0a0a !important;
      background: #fff !important;
    }
  }

  [data-theme="red"] {
    [data-sidebar="menu-button"][data-matched="true"] {
      @apply bg-primary !text-white;
    }
  }

  [data-theme="green"] {
    [data-sidebar="sidebar-wrapper"] {
      background: none;
      background-image: linear-gradient(
        0.4turn,
        #008e8d 20%,
        #24ec7d 100%
      ) !important;
      border: none;
    }
    [data-sidebar="sidebar"],
    [data-sidebar="content"] {
      background: transparent !important;
    }
    [data-sidebar="menu-item"] * {
      color: #fff !important;
    }
    [data-sidebar="menu-item"] *:hover {
      background: none !important;
      color: #fff !important;
    }
    [data-sidebar="trigger"]:hover,
    [data-sidebar="menu-button"]:hover,
    [data-sidebar="menu-sub-button"]:hover {
      background: rgba(0, 0, 0, 0.1) !important;
    }
    [data-sidebar="trigger"][data-matched="true"],
    [data-sidebar="menu-button"][data-matched="true"],
    [data-sidebar="menu-sub-button"][data-matched="true"] {
      background: rgba(0, 0, 0, 0.2) !important;
    }
    [data-sidebar="trigger"] > svg {
      color: #fff !important;
    }
    [data-radix-popper-content-wrapper] > * {
      color: #0a0a0a !important;
      background: #fff !important;
    }
    [data-radix-popper-content-wrapper] > *:hover {
      color: #0a0a0a !important;
      background: #fff !important;
    }
  }
}