.selection.leagues {
  padding-block: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.league.card {
  --card-width: 10rem;
  --glow-mask: var(--glow-leagues);
  --glow-scale: 160%;

  width: min(100%, var(--card-width));
  flex: 0 1 min(100%, var(--card-width));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    pointer-events: none;
    user-select: none;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
    width: max(20%, 10rem);
  }

  .league-card-logo {
    transition-property: scale, filter;
  }
}

@media (hover) {
  .league.card:hover {
    z-index: 2;

    .league-card-logo {
      filter: drop-shadow(0 0 5px var(--key-color));
      scale: 1.1;
    }

  }

  .leagues:has(.league.card:not(.active):hover) .league.card.active {
    z-index: 1;
  }
}

@media (width <= 600px ) {
  .league.card {
    --card-width: 7rem;
    width: max(33%, var(--card-width));
  }
  .league.card img {
    width: max(33%, var(--card-width));
  }
}


/* This hides the default Tabs to use the custom one with the League logos and page theming */
#teamsSelection .tab-navs {
  display: none;
  visibility: hidden;
}

main:has(.selection.teams):not(:has(.matches)) {
  margin-block-end: 8rem;
}