@theguild/components/dist/index.css

/* src/components/marketplace-search.css */
.MarketplaceSearch {
  --fg: #fff;
  --fg-80: rgb(from var(--fg) r g b / 0.8);
  --fg-70: rgb(from var(--fg) r g b / 0.7);
  --fg-60: rgb(from var(--fg) r g b / 0.6);
  &.green {
    --bg: #00342C;
  }
  &.neutral {
    --bg: #171717;
    .light & {
      --bg: #fff;
      --fg: #171717;
    }
  }
}
.MarketplaceSearchTabs [role=tablist] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: 1rem;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.MarketplaceSearchTabs [role=tablist].green {
  --tw-bg-opacity: 1;
  background-color: rgb(21 67 60 / var(--tw-bg-opacity));
}
.MarketplaceSearchTabs [role=tablist] {
  .light & {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity));
  }
  .green & {
    --tw-bg-opacity: 1;
    background-color: rgb(21 67 60 / var(--tw-bg-opacity));
  }
  & button {
    border-radius: 1rem;
  }
  & button {
    border-style: none;
  }
  & button {
    padding: 0.75rem;
  }
  & button {
    font-size: .875rem;
  }
  & button {
    font-weight: 500;
  }
  & button {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity));
  }
  @media (min-width: 640px) {
    & button {
      padding: 1rem;
    }
  }
  @media (min-width: 640px) {
    & button {
      font-size: 1rem;
    }
  }
  & button {
    .light & {
      --tw-bg-opacity: 1;
      background-color: rgb(245 245 245 / var(--tw-bg-opacity));
    }
    .light & {
      --tw-text-opacity: 1;
      color: rgb(38 38 38 / var(--tw-text-opacity));
    }
    .green & {
      --tw-bg-opacity: 1;
      background-color: rgb(21 67 60 / var(--tw-bg-opacity));
    }
    .green & {
      --tw-text-opacity: 1;
      color: rgb(202 228 222 / var(--tw-text-opacity));
    }
    &:hover {
      background-color: rgb(64 64 64 / 0.5);
    }
    &:hover {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
    }
    &:hover {
      .light & {
        background-color: rgb(229 229 229 / 0.8);
      }
      .light & {
        --tw-text-opacity: 1;
        color: rgb(23 23 23 / var(--tw-text-opacity));
      }
      .green & {
        background-color: rgb(59 115 106 / 0.25);
      }
      .green & {
        --tw-text-opacity: 1;
        color: rgb(236 246 243 / var(--tw-text-opacity));
      }
    }
    &[aria-selected=true],
    &[aria-selected=true]:hover {
      cursor: default;
    }
    &[aria-selected=true],
    &[aria-selected=true]:hover {
      background-color: var(--fg);
    }
    &[aria-selected=true],
    &[aria-selected=true]:hover {
      color: var(--bg);
    }
    &[aria-selected=true],
    &[aria-selected=true]:hover {
      .green & {
        --tw-bg-opacity: 1;
        background-color: rgb(167 213 202 / var(--tw-bg-opacity));
      }
      .green & {
        --tw-text-opacity: 1;
        color: rgb(36 88 80 / var(--tw-text-opacity));
      }
    }
  }
}