/* https://csswizardry.com/2013/04/shame-css/ */

.betbg-container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 79rem) {
    max-width: 79rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  } /* tw:container */
}

.details-list {
  --thumb-color: oklch(87% 0 0); /* neutral-300 */
  --thumb-hover-color: oklch(70.8% 0 0); /* neutral-400 */
  --spacing: 0.25rem;
  --top-bar-height: 4.034rem; /* 64.5391px from semantic */
  --bottom-bar-height: 1.25rem;

  display: grid; /* tw:grid */
  grid-template-columns: 16rem 1fr;
  column-gap: calc(var(--spacing) * 4); /* tw:gap-x-4 */

  .search-list {
    margin-top: var(--top-bar-height);
    padding-block: calc(var(--spacing) * 6); /* tw:py-6 */
    padding-bottom: calc(var(--spacing) * 24); /* tw:pb-24 */
  }

  .search-sidebar {
    .inner {
      height: calc(100vh - var(--top-bar-height) - var(--bottom-bar-height));
      overflow-y: auto;
      padding-right: calc(var(--spacing) * 4); /* tw:pr-4 */
      position: sticky;
      scrollbar-color: var(--thumb-color) transparent;
      scrollbar-width: thin;
      padding-block: calc(var(--spacing) * 6); /* tw:py-6 */
      top: calc(var(--top-bar-height));

      &::-webkit-scrollbar {
        width: 4px;
        background: transparent;
      }
      &::-webkit-scrollbar-thumb {
        background: var(--thumb-color);
        border-radius: 2px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: var(--thumb-hover-color);
      }

    }
  }
}