@keyframes SkeletonFadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

.bracket-listing {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 16px);
}

.bracket-listing_title {
  font-size: var(--typography-font-size-heading1-sm, 28px);
  line-height: var(--typography-line-height-heading2-sm, 32px);
}

.bracket-listing_skeleton {
  width: 100%;
  height: 80px;
  background-color: var(--color-background-background-subtle-neutral);
  animation-name: SkeletonFadeIn;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.bracket-listing_emptycontent > .empty-cell {
  padding: 0;
}

.bracket-listing_chips {
  display: flex;
  gap: var(--space-sm, 8px);
  overflow-x: scroll;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none;
}

.bracket-listing_chips::-webkit-scrollbar {
  display: none;
}

.bracket-listing_chips-item {
  cursor: pointer;
  border: 1px solid var(--color-border-width-border-width-disabled, #c5c5c6);
  color: var(--color-foreground-foreground-strong, #606062);
  background-color: transparent;
  font-size: var(--typography-font-size-body1-sm, 16px);
  line-height: var(--typography-line-height-body1-sm, 24px);
  padding: var(--space-xs, 4px) var(--space-lg, 16px);
  white-space: nowrap;
  border-radius: 32px;
}

.bracket-listing_chips-item.active {
  color: var(--color-neutral-0, #fff);
  background-color: var(--color-surface-surface-active, #0d3599);
  border: 1px solid var(--color-surface-surface-active, #0d3599);
  font-weight: var(--font-weight-label1, 700);
}

.bracket-listing .fixtureGroup_header {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bracket-listing .fixtureGroup_content {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

@media only screen and (min-width: 961px) {
  .bracket-listing {
    gap: var(--space-xl, 24px);
  }
}