.lottery-selector .selector-buttons,
.lottery-selector .selector-buttons:not(.capsule-style),
.lottery-selector .selector-buttons.capsule-style {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.lottery-selector .selector-btn,
.lottery-selector .selector-buttons:not(.capsule-style) .selector-btn,
.lottery-selector .selector-btn.capsule-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  grid-column: auto !important;
  min-height: 42px !important;
  padding: 10px 8px !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.lottery-selector .selector-btn.capsule-btn:first-child,
.lottery-selector .selector-btn.capsule-btn:last-child {
  border-radius: 6px !important;
}

.lottery-selector .selector-buttons[data-count="1"],
.lottery-selector .selector-buttons[data-lottery-count="1"],
.lottery-selector .selector-buttons.lottery-count-1,
.lottery-selector .selector-buttons.selector-count-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.lottery-selector .selector-buttons[data-count="2"],
.lottery-selector .selector-buttons[data-lottery-count="2"],
.lottery-selector .selector-buttons.lottery-count-2,
.lottery-selector .selector-buttons.selector-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.lottery-selector .selector-buttons[data-count="3"],
.lottery-selector .selector-buttons[data-lottery-count="3"],
.lottery-selector .selector-buttons.lottery-count-3,
.lottery-selector .selector-buttons.selector-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.lottery-selector .selector-buttons[data-count="4"],
.lottery-selector .selector-buttons[data-lottery-count="4"],
.lottery-selector .selector-buttons.lottery-count-4,
.lottery-selector .selector-buttons.selector-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.lottery-selector .selector-buttons.selector-count-5,
.lottery-selector .selector-buttons[data-count="5"],
.lottery-selector .selector-buttons[data-lottery-count="5"],
.lottery-selector .selector-buttons.lottery-count-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.lottery-selector .selector-buttons.selector-count-5 > .selector-btn,
.lottery-selector .selector-buttons[data-count="5"] > .selector-btn,
.lottery-selector .selector-buttons[data-lottery-count="5"] > .selector-btn,
.lottery-selector .selector-buttons.lottery-count-5 > .selector-btn {
  grid-column: span 2 !important;
}

.lottery-selector .selector-buttons.selector-count-5 > .selector-btn:nth-last-child(-n+2),
.lottery-selector .selector-buttons[data-count="5"] > .selector-btn:nth-last-child(-n+2),
.lottery-selector .selector-buttons[data-lottery-count="5"] > .selector-btn:nth-last-child(-n+2),
.lottery-selector .selector-buttons.lottery-count-5 > .selector-btn:nth-last-child(-n+2) {
  grid-column: span 3 !important;
}

@supports selector(:has(*)) {
  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(1):last-child) {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(5):last-child) > .selector-btn {
    grid-column: span 2 !important;
  }

  .lottery-selector .selector-buttons:has(> .selector-btn:nth-child(5):last-child) > .selector-btn:nth-last-child(-n+2) {
    grid-column: span 3 !important;
  }
}