.league-item {
  background-color: var(--background);

  border-radius: 0.5rem;

  border-bottom-color: var(--color-off-white);
  border-bottom-width: 2px;
  border-bottom-style: solid;

  transition: 0.3s;

  interpolate-size: allow-keywords;
  padding: calc(var(--spacing) * 3);
  width: 100%;
}

.league-item:hover,
.league-item:focus {
  background-color: color-mix(in srgb, var(--background), black 20%);
}

summary {
  cursor: pointer;
  list-style: none;
}

.league-item summary::marker,
:is(::-webkit-details-marker) {
  content: none !important;
}


/* hidden state */
.league-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s ease-out,
    content-visibility 0.3s ease-out;
  transition-behavior: allow-discrete;
}

/* expanded */
.league-item[open]::details-content {
  block-size: auto;
}

#team-popover {
  margin: auto;
  inset: 0;

  border-radius: 0.5rem;
  background-color: var(--color-dark-green);
}

#team-popover::backdrop {
  backdrop-filter: blur(10px);
}