@golstats/gsc-lineups-reports 1.0.1

package/src/components/gsc-header-probables-lineup.vue

@@ -0,0 +1,1044 @@
+<template>
+<div :class="$style.headerSeccionAlineaciones">
+    <div :class="$style.headerSeccionAlineaciones1" id="header-desktop">
+      <div :class="$style.groupsLeagueParent">
+        <div :class="$style.groupsLeague">
+          <span>Las alineaciones de este partido </span>
+          <span :class="$style.anNoEstn">aún no están disponibles</span>
+          <span>. Por lo pronto puedes ver alineaciones: </span>
+        </div>
+        <div :class="$style.switchStatesBig" id="switch-lineup">
+          <GscSwitchComponent
+                    :buttons="['Historicos', 'Recientes', 'Probables']"
+                    :selectedOption="optionSelected"
+                    :type="1" 
+                    :arrow="false" 
+                    borderRadius="32px" 
+                    height="28px" 
+                    fontSize="11px;" 
+                    fontFamily="Poppins-Regular" 
+                    border-width="1px" 
+                    border-width-container="0px" 
+                    backgroundOptionDisable="#162533" 
+                    width="600px"
+                    backgroundOptionActive="transparent"
+                    @input="clickOnSelectOption" />
+        </div>
+      </div>
+      <div :class="$style.matchContainer" id="match-container">
+        <div :class="$style.homeTeamContainer">
+          <div :class="$style.teamContainer">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
+              />
+            </div>
+          </div>
+          <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+     
+              <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
+                        <template #default="data">
+                            <div class="selector-tournaments">{{data.selectedItem.name}}</div>
+                        </template>
+                        <template #availableItem="{item}">
+                            <div>{{item.name}}</div>
+                        </template>
+                    </GSCDropdown>
+          <div :class="$style.team">
+            <div :class="$style.manchesterUnited">vs</div>
+            <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
+            <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
+          </div>
+        </div>
+        <div :class="$style.scoreContainerWrapper">
+          <div :class="$style.scoreContainer">
+            <div :class="$style.div1">2</div>
+            <div :class="$style.div1">-</div>
+            <div :class="$style.div1">2</div>
+          </div>
+        </div>
+        <div :class="$style.awayTeamContainer">
+          <div :class="$style.team1">
+            <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
+            <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
+            <div :class="$style.manchesterUnited">vs</div>
+          </div>
+              <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
+                        <template #default="data">
+                            <div class="selector-tournaments">{{data.selectedItem.name}}</div>
+                        </template>
+                        <template #availableItem="{item}">
+                            <div>{{item.name}}</div>
+                        </template>
+                    </GSCDropdown>
+          <div :class="$style.name1">{{ gameInfo.away_team_abbreviation }}</div>
+          <div :class="$style.teamContainer1">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+     
+    </div>
+    <div :class="$style.headerSeccionAlineaciones2" id="header-desktop">
+      <div :class="$style.groupsLeagueParent">
+        <div :class="$style.groupsLeague">
+          <span>Las alineaciones de este partido </span>
+          <span :class="$style.anNoEstn">aún no están disponibles</span>
+          <span>. Por lo pronto puedes ver alineaciones:</span>
+        </div>
+        <div :class="$style.switchStatesBig" id="switch-lineup">
+          <GscSwitchComponent
+          :buttons="['Historicos', 'Recientes', 'Probables']"
+          :selectedOption="optionSelected"
+          :type="1" 
+          :arrow="false" 
+          borderRadius="32px" 
+          height="28px" 
+          fontSize="11px;" 
+          fontFamily="Poppins-Regular" 
+          border-width="1px" 
+          border-width-container="0px" 
+          backgroundOptionDisable="#162533" 
+          width="600px"
+          backgroundOptionActive="transparent"
+          @input="clickOnSelectOption" />
+        </div>
+      </div>
+      <div :class="$style.matchContainer" id="match-container">
+        <div :class="$style.homeTeamContainer1">
+          <div :class="$style.teamContainer">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
+              />
+            </div>
+          </div>
+          <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+          <div :class="$style.frameParent">
+            <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
+                        <template #default="data">
+                            <div class="selector-tournaments">{{data.selectedItem.name}}</div>
+                        </template>
+                        <template #availableItem="{item}">
+                            <div>{{item.name}}</div>
+                        </template>
+                    </GSCDropdown>
+          </div>
+          <div :class="$style.team">
+            <div :class="$style.manchesterUnited">vs</div>
+            <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
+            <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
+          </div>
+        </div>
+        <div :class="$style.awayTeamContainer1">
+          
+          
+          <div :class="$style.team">
+            <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
+            <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
+            <div :class="$style.manchesterUnited">vs</div>
+          </div>
+          <div :class="$style.frameParent">
+            <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
+                        <template #default="data">
+                            <div class="selector-tournaments">{{data.selectedItem.name}}</div>
+                        </template>
+                        <template #availableItem="{item}">
+                            <div>{{item.name}}</div>
+                        </template>
+                    </GSCDropdown>
+          </div>
+          <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+          <div :class="$style.teamContainer1">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div :class="$style.headerSeccionAlineaciones3" id="header-mobile">
+      <div :class="$style.switchStatesBig2" id="switch-lineup">
+        <GscSwitchComponent
+          :buttons="['Historicos', 'Recientes', 'Probables']"
+          :selectedOption="optionSelected"
+          :type="1" 
+          :arrow="false" 
+          borderRadius="32px" 
+          height="28px" 
+          fontSize="11px;" 
+          fontFamily="Poppins-Regular" 
+          border-width="1px" 
+          border-width-container="0px" 
+          backgroundOptionDisable="#162533" 
+          width="600px"
+          backgroundOptionActive="transparent"
+          @input="clickOnSelectOption" />
+      </div>
+      <div :class="$style.containerData">
+        <div :class="$style.manchesterUnited28">Alineación utilizada en:</div>
+        <div :class="$style.matchContainer2" id="match-container">
+          <div :class="$style.homeTeamContainer2">
+            <div :class="$style.teamContainer">
+              <div :class="$style.imgHomeTeamWrapper">
+                <img
+                  :class="$style.imgHomeTeamIcon"
+                  alt=""
+                  :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
+                />
+              </div>
+            </div>
+            <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+          </div>
+          <div :class="$style.homeTeamContainer2">
+            <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+            <div :class="$style.teamContainer1">
+              <div :class="$style.imgHomeTeamWrapper">
+                <img
+                  :class="$style.imgHomeTeamIcon"
+                  alt=""
+                  :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div :class="$style.filtersContainer">
+          <div :class="$style.filterMatchdayParent">
+            <div :class="$style.filterMatchday">
+              <div :class="$style.filterMatchday1">
+              <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
+                        <template #default="data">
+                            <div class="selector-tournaments">{{data.selectedItem.name}}</div>
+                        </template>
+                        <template #availableItem="{item}">
+                            <div>{{item.name}}</div>
+                        </template>
+                    </GSCDropdown>
+                    </div>
+            </div>
+            <div :class="$style.team4">
+              <div :class="$style.manchesterUnited1">vs</div>
+              <img
+                :class="$style.necaxaIcon4"
+                alt=""
+                :src="rivalHomeImg"
+              />
+<!--              <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div> -->
+            </div>
+          </div>
+          <div :class="$style.teamParent">
+            <div :class="$style.team1">
+<!--              <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div> -->
+              <img
+                :class="$style.necaxaIcon4"
+                alt=""
+                :src="rivalVisitImg"
+              />
+              <div :class="$style.manchesterUnited1">vs</div>
+            </div>
+            <div :class="$style.filterMatchday1">
+              <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
+                  <template #default="data">
+                      <div class="selector-tournaments">{{data.selectedItem.name}}</div>
+                  </template>
+                  <template #availableItem="{item}">
+                      <div>{{item.name}}</div>
+                  </template>
+              </GSCDropdown>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+    
+<script>
+import {
+    GSCDropdown
+} from '@golstats/gsc-dropdown';
+import '@@/@golstats/gsc-dropdown/dist/style.css'
+import { GscSwitchComponent } from '@golstats/gsc-switch-component'
+import '@@/@golstats/gsc-switch-component/dist/style.css'
+export default {
+     components: { GSCDropdown, GscSwitchComponent},
+    props: {
+      optionSelected: {
+        type: String,
+        default: 'Historicos',
+      },
+      gameInfo: {
+            type: Object,
+            default: () => {},
+        },
+        gameRecientes: {
+            type: Array,
+            default: () => [],
+        },
+        matchdaysDefault: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+             rivalHomeImg:  '',
+             rivalVisitImg:  '',
+             rivalHomeAbrev:  '', 
+             rivalVisitAbrev:  '',
+             auxVal: 0,
+             
+        }
+    },
+    watch: {
+        gameInfo: {
+            immediate: true,
+            handler: async function (newValue) {
+                try {
+                    this.$emit('input',newValue);
+                } catch (e) {
+                    throw new Error(e);
+                }
+            },
+        },
+    },
+    methods: {
+      clickOnSelectOption(val){
+        this.$emit('clickOnSelectOption', val);
+      },
+      changeDropdownVisit(val){
+        const indexGame = this.gameRecientes[this.gameInfo.away_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
+        this.rivalVisitAbrev = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team_abbreviation : this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation; 
+        this.rivalVisitImg = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team+'.png';
+       
+          this.$emit('changeaway',this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame]);
+       
+      },
+      changeDropdownLocal(val){
+        const indexGame = this.gameRecientes[this.gameInfo.home_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
+        this.rivalHomeAbrev = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team_abbreviation : this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation; 
+        this.rivalHomeImg = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team+'.png';
+      
+          this.$emit('changehome',this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame]);
+   
+      }
+    }
+};
+</script>
+
+    
+<style module>
+@import '/css/fonts.css';
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* fonts */
+  --font-poppinspro: Poppins;
+  --font-interpro: Inter;
+
+  /* font sizes */
+  --font-size-3xspro: 10px;
+  --font-size-xspro: 12px;
+  --font-size-smpro: 14px;
+  --font-size-2xspro: 11px;
+  --font-size-4xspro: 9px;
+  --font-size-base-2pro: 15.2px;
+
+  /* Colors */
+  --color-gray-100pro: #172632;
+  --color-gray-200pro: #172531;
+  --color-gray-300pro: rgba(255, 255, 255, 0.7);
+  --color-gray-400pro: rgba(255, 255, 255, 0.3);
+  --color-whitepro: #fff;
+  --color-yellowgreen-100pro: #cbee6b;
+  --color-yellowgreen-200pro: #cbed6e;
+  --color-whitesmokepro: #f4f4f4;
+  --color-darkbluepro: #0234c5;
+  --color-darkslategraypro: #1e2b36;
+  --color-goldenrodpro: #f7c330;
+  --color-redpro: #ff0000;
+  --color-slategraypro: #56637b;
+
+  /* Spacing */
+  --sizes-round-corner-round-corner-32pro: 32px;
+  --sizes-spacing-space-24pro: 24px;
+
+  /* Gaps */
+  --gap-basepro: 16px;
+  --gap-3xspro: 10px;
+  --gap-7xspro: 6px;
+  --gap-11xspro: 2px;
+  --gap-8xspro: 5px;
+  --gap-40xlpro: 59px;
+  --gap-4xspro: 9px;
+  --gap-11xlpro: 30px;
+
+  /* Paddings */
+  --padding-basepro: 16px;
+  --padding-5xlpro: 24px;
+  --padding-xspro: 12px;
+  --padding-7xspro: 6px;
+  --padding-11xspro: 2px;
+  --padding-3xspro: 10px;
+  --padding-29xlpro: 48px;
+  --padding-xlpro: 20px;
+  --padding-5xspro: 8px;
+
+  /* Border radiuses */
+  --br-9xspro: 4px;
+  --br-2xs-2pro: 10.2px;
+  --br-31xlpro: 50px;
+  --br-13xlpro: 32px;
+  --br-12xspro: 1px;
+}
+
+.anNoEstn {
+    font-weight: 500;
+  }
+  .groupsLeague {
+    position: relative;
+    line-height: 20px;
+  }
+  .historicas {
+    position: relative;
+    line-height: 20px;
+    opacity: 0.6;
+  }
+  .switchOption {
+    border-radius: var(--br-13xlpro);
+    width: 109px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
+    box-sizing: border-box;
+  }
+  .switchOption1 {
+    border-radius: var(--br-13xlpro);
+    width: 107px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
+    box-sizing: border-box;
+  }
+  .probables {
+    position: relative;
+    line-height: 20px;
+    font-weight: 600;
+  }
+  .switchOption2 {
+    border-radius: var(--br-13xlpro);
+    background-color: var(--color-darkslategraypro);
+    border: 0.8px solid var(--color-yellowgreen-100pro);
+    box-sizing: border-box;
+    width: 109.8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
+  }
+  .switchStatesBig {
+    border-radius: var(--sizes-round-corner-round-corner-32pro);
+    background-color: var(--color-gray-100pro);
+    border: 1px solid var(--color-gray-400pro);
+    display: inline-block;
+    width: 320px;
+    font-size: var(--font-size-xspro);
+    color: var(--color-whitepro);
+  }
+  .groupsLeagueParent {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-11xlpro);
+    text-align: center;
+  }
+  .imgHomeTeamIcon {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    object-fit: cover;
+  }
+  .imgHomeTeamWrapper {
+    border-radius: var(--br-31xlpro);
+    background-color: var(--color-gray-200pro);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro);
+    box-sizing: border-box;
+  }
+  .teamContainer {
+    border-radius: var(--br-31xlpro);
+    border: 1px solid var(--color-darkbluepro);
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro);
+  }
+  .name {
+    position: relative;
+    letter-spacing: 0.31px;
+    line-height: 30.87px;
+    font-weight: 500;
+  }
+  .jor {
+    position: relative;
+    line-height: 9px;
+    font-weight: 600;
+    opacity: 0.6;
+  }
+  .jorParent {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-7xspro);
+  }
+  .shapeIcon {
+    position: relative;
+    width: 8px;
+    height: 4px;
+  }
+  .frameParent {
+    cursor: pointer;
+    width: auto;
+    border: 1px solid var(--color-gray-400pro);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: var(--br-5xsre);
+    box-sizing: border-box;
+    height: 32px;
+    display: flex;
+    font-size: 10px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-3xspro);
+  }
+  .manchesterUnited {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    width: 16px;
+    height: 29px;
+    flex-shrink: 0;
+  }
+  .necaxaIcon {
+    position: relative;
+    width: 29px;
+    height: 29px;
+    object-fit: cover;
+  }
+  .manchesterUnited1 {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+  }
+  .team {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-8xspro);
+    color: var(--color-gray-300pro);
+  }
+  .homeTeamContainer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-slategraypro);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 0px var(--padding-xlpro);
+    gap: var(--gap-3xspro);
+  }
+  .div1 {
+    position: relative;
+    font-weight: 600;
+  }
+  .scoreContainer {
+    border-radius: 17.4px;
+    background-color: rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: 8.7px;
+    opacity: 0;
+  }
+  .scoreContainerWrapper {
+    align-self: stretch;
+    width: 323px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    font-size: 15.22px;
+    color: var(--color-whitepro);
+    font-family: var(--font-interpro);
+  }
+  .team1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-8xspro);
+  }
+  .name1 {
+    position: relative;
+    letter-spacing: 0.31px;
+    line-height: 30.87px;
+    font-weight: 500;
+    color: var(--color-whitesmokepro);
+  }
+  .teamContainer1 {
+    border-radius: var(--br-31xlpro);
+    border: 1px solid var(--color-yellowgreen-200pro);
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro);
+  }
+  .awayTeamContainer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-slategraypro);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px 0px var(--padding-xlpro);
+    gap: var(--gap-3xspro);
+    color: var(--color-gray-300pro);
+  }
+  .matchContainer {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 0px var(--padding-xspro);
+    color: var(--color-whitesmokepro);
+  }
+  .goalChild {
+    position: relative;
+    width: 8.03px;
+    height: 8.03px;
+  }
+  .goal {
+    width: 9px;
+    height: 9px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  .manchesterUnited4 {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 19.5px;
+    text-transform: capitalize;
+    font-weight: 500;
+  }
+  .minuteEvent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-4xspro);
+  }
+  .yellowCard {
+    position: relative;
+    border-radius: var(--br-12xspro);
+    background-color: var(--color-goldenrodpro);
+    width: 4px;
+    height: 6px;
+  }
+  .awayTeamEvents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--gap-3xspro);
+  }
+  .rectangle {
+    position: relative;
+    border-radius: var(--br-12xspro);
+    background-color: var(--color-redpro);
+    width: 4px;
+    height: 6px;
+  }
+  .homeTeamEvents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-start;
+    gap: var(--gap-3xspro);
+    text-align: right;
+  }
+  .totalEvents {
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-40xlpro);
+    font-size: var(--font-size-4xspro);
+  }
+  .headerSeccionAlineaciones1 {
+    align-self: stretch;
+    background-color: var(--color-gray-200pro);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px var(--padding-29xlpro);
+    gap: var(--gap-basepro);
+  }
+  .homeTeamContainer1 {
+    border-bottom: 1px solid var(--color-slategraypro);
+    box-sizing: border-box;
+    width: 45%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 0px var(--padding-xlpro);
+    gap: var(--gap-3xspro);
+  }
+  .awayTeamContainer1 {
+    border-bottom: 1px solid var(--color-slategraypro);
+    box-sizing: border-box;
+    width: 45%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px 0px var(--padding-xlpro);
+    gap: var(--gap-3xspro);
+  }
+  .headerSeccionAlineaciones2 {
+    align-self: stretch;
+    background-color: var(--color-gray-200pro);
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px var(--padding-29xlpro);
+    gap: var(--gap-basepro);
+  }
+  .jugadores {
+    position: relative;
+    line-height: 20px;
+    font-weight: 600;
+    opacity: 0.6;
+  }
+  .switchOption6 {
+    border-radius: var(--sizes-round-corner-round-corner-32pro);
+    width: 74px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
+    box-sizing: border-box;
+  }
+  .switchOption8 {
+    border-radius: var(--sizes-round-corner-round-corner-32pro);
+    background-color: var(--color-darkslategraypro);
+    border: 0.8px solid var(--color-yellowgreen-100pro);
+    box-sizing: border-box;
+    width: 74.8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
+  }
+  .switchStatesBig2 {
+    border-radius: var(--sizes-round-corner-round-corner-32pro);
+    background-color: var(--color-gray-100pro);
+    border: 1px solid var(--color-gray-400pro);
+    display: inline-block;
+    width: 280px;
+  }
+  .manchesterUnited28 {
+    position: relative;
+    font-weight: 500;
+  }
+  .homeTeamContainer2 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-3xspro);
+  }
+  .matchContainer2 {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 0px var(--padding-xspro);
+    text-align: left;
+    font-size: var(--font-size-smpro);
+    color: var(--color-whitesmokepro);
+  }
+  .manchesterUnited29 {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+    z-index: 0;
+  }
+  .sliderMatchesChild {
+    position: absolute;
+    margin: 0 !important;
+    top: 14.31px;
+    left: 261.07px;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+    z-index: 1;
+  }
+  .sliderMatchesItem {
+    position: absolute;
+    margin: 0 !important;
+    top: 0.31px;
+    left: 6.41px;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+    z-index: 2;
+  }
+  .sliderMatches {
+    display: none;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-11xspro) var(--padding-basepro);
+    position: relative;
+    gap: var(--gap-3xspro);
+    font-size: var(--font-size-smpro);
+  }
+  .jorParent2 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-11xspro);
+  }
+  .filterMatchday {
+    border-radius: var(--br-9xspro);
+    border: 1px solid var(--color-gray-400pro);
+    box-sizing: border-box;
+    height: 25px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-7xspro);
+  }
+  .necaxaIcon4 {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    object-fit: cover;
+  }
+  .team4 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-8xspro);
+    text-align: left;
+    font-size: var(--font-size-xspro);
+    color: var(--color-gray-300pro);
+  }
+  .filterMatchdayParent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-3xspro);
+  }
+  .filterMatchday1 {
+    border-radius: var(--br-9xspro);
+    border: 1px solid var(--color-gray-400pro);
+    box-sizing: border-box;
+    height: 25px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--padding-11xspro) var(--padding-7xspro);
+    gap: var(--gap-7xspro);
+    text-align: center;
+    font-size: var(--font-size-3xspro);
+    color: var(--color-whitepro);
+  }
+  .teamParent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-3xspro);
+    text-align: left;
+    font-size: var(--font-size-xspro);
+    color: var(--color-gray-300pro);
+  }
+  .filtersContainer {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 0px var(--padding-7xspro);
+    color: var(--color-whitepro);
+  }
+  .containerData {
+    align-self: stretch;
+    border-radius: 9px;
+    background-color: #192632;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--padding-basepro) var(--padding-5xlpro) 32px;
+    gap: 12px;
+    font-size: var(--font-size-3xspro);
+    color: var(--color-gray-300pro);
+  }
+  .headerSeccionAlineaciones3 {
+    align-self: stretch;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-basepro);
+    text-align: center;
+    font-size: var(--font-size-2xspro);
+    color: var(--color-whitepro);
+  }
+  .headerSeccionAlineaciones {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 132px;
+    text-align: left;
+    font-size: var(--font-size-smpro);
+    color: var(--color-gray-300pro);
+    font-family: var(--font-poppinspro);
+  }
+
+  @media screen and (max-width: 1200px) {
+    .headerSeccionAlineaciones1 {
+      align-self: stretch;
+      width: auto;
+      max-width: 1089px;
+    }
+
+    .headerSeccionAlineaciones2 {
+      display: none;
+      align-self: stretch;
+      width: auto;
+      max-width: 1089px;
+    }
+
+    .headerSeccionAlineaciones3 {
+      display: none;
+      max-width: 540px;
+    }
+  }
+  @media screen and (max-width: 420px) {
+    .headerSeccionAlineaciones1 {
+      display: none;
+    }
+
+    .headerSeccionAlineaciones2 {
+      display: none;
+    }
+
+    .headerSeccionAlineaciones3 {
+      display: flex;
+    }
+  }
+  @media screen and (max-width: 880px) {
+    .headerSeccionAlineaciones1 {
+      display: none;
+    }
+
+    .headerSeccionAlineaciones2 {
+      display: flex;
+    }
+
+    .headerSeccionAlineaciones3 {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 540px) {
+    .headerSeccionAlineaciones2 {
+      display: none;
+    }
+
+    .containerData {
+      padding-left: var(--padding-xspro);
+      padding-right: var(--padding-xspro);
+      box-sizing: border-box;
+    }
+
+    .headerSeccionAlineaciones3 {
+      display: flex;
+      min-width: 300px;
+    }
+  }
+</style>