Team Standings

$textColor: $color-interface;
$toolTipBgColor: $white;
$toolTipTextColor: $black;
$nextMatch: $amber;
$possibleMatch: $tahitigold;
$winMatch: $junglegreen;
$lossMatch: $alizarincrimson;
$drawMatch: $alto;
$npMatch: $alto;

.team-standings {
  &__match-details {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4rem;
  }
  &__match-round {
    display: flex;
  }
  &__match-stats {
    display: flex;
  }
  &__match-report {
    text-align: center;
  }
  &__match-report li {
    display: inline;
    color: $textColor !important;
    font-family: $text-font !important;
    font-size: 1.6rem !important;
    margin-right: 2.9rem;
    white-space: nowrap;
    line-height: 3rem;
  }
  &__match-report li:last-child {
    margin-right: 0;
  }
  &__match-report li::before {
    content: '';
    background: $winMatch;
    height: 1.6rem !important;
    width: 1.6rem !important;
    border-radius: 0.8rem;
    display: inline-block;
    margin-right: 0.9rem;
    vertical-align: middle;
  }
  &__match-report li.next::before {
    background: $nextMatch !important;
  }
  &__match-report li.possible::before {
    background: $possibleMatch !important;
  }
  &__match-report li.win::before {
    background: $winMatch !important;
  }
  &__match-report li.loss::before {
    background: $lossMatch !important;
  }
  &__match-report li.draw::before {
    background: $drawMatch !important;
  }
  &__match-report li.notplayed::before {
    background: none !important;
    border: 1px solid $npMatch;
  }

  @media only screen and (max-width: 768px) {
    &__container {
      padding: 2.4rem 0;
    }
    &__match-details {
      display: block;
    }
    &__match-round,
    &__match-stats {
      justify-content: center;
      margin-top: 1rem;
    }
  }

  /* opta style customization */
  .Opta .Opta-H2,
  .Opta h2 {
    background: transparent !important;
    color: $textColor !important;
    font-family: $text-font !important;
    font-size: 1.6rem !important;
  }
  .Opta > .Opta_W,
  .Opta > .Opta_W > div,
  .Opta .Opta-Nav a,
  .Opta .Opta-Nav {
    background: transparent !important;
  }
  .Opta td,
  .Opta th {
    padding: 2rem;

    @media screen and (min-width: 550px) {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    @media screen and (min-width: 800px) {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    @media screen and (min-width: 1115px) {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }
  .Opta .Opta-Nav ul {
    border-bottom: 1px solid #eceef3;
    overflow: visible;
    background: transparent;

    @media screen and (min-width: 550px) {
      display: flex;
      justify-content: space-around;
    }
  }

  .Opta .Opta-Nav li {
    font-family: $text-font;
    border: none;
    margin-bottom: -1px;

    a:hover {
      color: $color-primary;
      border-bottom: 1px solid $blue-accent2;
    }
  }
  .Opta .Opta-Nav li.Opta-On a {
    color: $blue-accent2;
    border-bottom: 1px solid $blue-accent2;
  }
  .Opta tbody td {
    color: rgba(1, 30, 65, 0.7);
    font-family: $text-font;
    font-size: 1.6rem;
  }
  .Opta thead th {
    @include text-s--narrow;

    color: $blue-accent2;
    background: transparent;
  }

  /* stylelint-disable no-descending-specificity */
  .Opta .Opta-Odd td,
  .Opta .Opta-Odd th,
  .Opta div.Opta-Odd,
  .Opta li.Opta-Odd,
  .Opta .Opta-Even td,
  .Opta .Opta-Even th,
  .Opta div.Opta-Even,
  .Opta .Opta-Striped li:nth-child(odd),
  .Opta .Opta-Striped tbody tr:nth-child(odd) td,
  .Opta .Opta-Striped tbody tr:nth-child(odd) th,
  .Opta li.Opta-Even .Opta .Opta-Striped li:nth-child(even),
  .Opta .Opta-Striped tbody tr:nth-child(even) td,
  .Opta .Opta-Striped tbody tr:nth-child(even) th {
    background-color: transparent;
    border-bottom: 1px solid $grey;
    text-align: center;
  }

  /* stylelint-enable no-descending-specificity */
  .Opta .Opta-Record {
    margin-top: -0.6rem;
    & > span {
      background: $winMatch;
      height: 1.6rem !important;
      width: 1.6rem !important;
      border-radius: 0.8rem;
      text-indent: -999em;
    }

    @media screen and (min-width: 550px) {
      min-width: 106px;
      display: flex;
      justify-content: space-between;
    }
  }
  .Opta .Opta-Record > span.Opta-Win {
    background-color: $winMatch !important;
  }
  .Opta .Opta-Record > span.Opta-Lose {
    background-color: $lossMatch !important;
  }
  .Opta .Opta-Record > span.Opta-Draw {
    background-color: $drawMatch !important;
  }
  .Opta .Opta_W .Opta-Tooltip {
    background: $toolTipBgColor !important;
    color: $toolTipTextColor !important;
    border-radius: 4px;
  }
  .Opta .Opta_W .Opta-Tooltip h3 {
    background: $toolTipBgColor !important;
    color: $toolTipTextColor !important;
    font-family: $text-font !important;
    font-size: 1.2rem !important;
    line-height: 1.2rem !important;
    height: 3.5rem !important;
  }
  .Opta .Opta_W .Opta-Tooltip p {
    text-align: center;
    line-height: 1.2rem !important;
  }
  .Opta .Opta-Key dd,
  .Opta .Opta-Key dt {
    color: $textColor !important;
  }
  .Opta-Narrow .Opta_F_S_N .Opta-Record {
    min-width: 70px;
  }
  .Opta .Opta_F_S.Opta_F_S_N table .Opta-Team {
    width: 100%;
    color: $textColor;
    text-align: left;
    font-size: 1.4rem;
  }
  .Opta .Opta_F_S.Opta_F_S_N table .Opta-points {
    background-color: #eceef3;
  }

  .Opta .Opta-Key {
    display: none;
  }
  .Opta .Opta-Table-Scroll .Opta-Table-Scroll-Fixed-Column {
    background-color: #fff !important;
  }
}