import styled from 'styled-components';
import { WidgetWrapper } from '../opta-match-stats/shared/styles';
import { WidgetContainer } from '../opta-match-stats/matchday-live/styles/WidgetContainer';

export const StartingFormationsWrapper = styled(WidgetWrapper)`
  ${WidgetContainer} {
    min-height: 462px;

    @media (max-width: 520px) {
      min-height: 325px;
    }
  }

  h3 {
    display: block !important;
    font-size: 20px;

    @media (min-width: 701px) {
      font-size: 24px;
    }
  }

  .Opta-MatchHeader {
    margin-bottom: 16px;
    border-bottom: 0 !important;

    tr {
      display: flex;
      gap: 0;
      align-items: flex-start;
      justify-content: space-between !important;
    }

    .Opta-Score,
    .Opta-Divider {
      display: none;
    }

    .Opta-Team {
      font-size: 18px !important;
      line-height: 1.2;
      padding: 0 0 12px;
      white-space: normal;
      width: 50%;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      gap: 8px;

      @media (min-width: 701px) {
        font-size: 20px !important;
      }
    }

    .Opta-Team.Opta-Home {
      align-items: flex-start;
      text-align: left;
    }

    .Opta-Team.Opta-Away {
      align-items: flex-end;
      text-align: right;
    }

    .Opta-TeamFormation {
      font-size: 14px;
      margin: 0;
      white-space: nowrap;
    }

    .Opta-TeamFormation::before {
      content: 'Formation: ';
    }
  }

  .Opta-FootballPitch {
    margin-inline: 0;
    margin-bottom: 0;
  }
`;