@golstats/gsc-lineups-reports 1.0.1

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

@@ -0,0 +1,985 @@
+<template>
+    <div :class="$style.gscheaderlineup" >
+        <div :class="$style.headerSeccionAlineaciones">
+            <div :class="headerSeccionAlineaciones1Class" id="header-desktop">
+              <!-- alineaciones switch --> 
+              
+            <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
+                    v-if="(gameInfo.game_status == 0 || gameInfo.game_status == 4) && gameRecientes > 0"
+                    :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>
+            <!-- alineaciones switch --> 
+            <div :class="$style.matchContainer" id="match-container">
+                <div :class="$style.homeTeamContainer">
+                <div :class="$style.teamContainer">
+                    <div :class="$style.imgHomeTeamWrapper">
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        v-if="gameHistoric.length > 0"
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameHistoric[selectedOption].objgame.home_team+'.png'"
+                    />
+                    </div>
+                </div>
+                <div :class="$style.name" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.home_team_abbreviation }}</div>
+                </div>
+                <div :class="$style.scoreContainerWrapper">
+                <div :class="$style.scoreContainer">
+                    <div :class="$style.div" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.score[0] }}</div>
+                    <div :class="$style.div">&nbsp;-&nbsp;</div>
+                    <div :class="$style.div" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.score[1] }}</div>
+                </div>
+                </div>
+                <div :class="$style.awayTeamContainer">
+                <div :class="$style.name" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.away_team_abbreviation }}</div>
+                <div :class="$style.teamContainer1">
+                    <div :class="$style.imgHomeTeamWrapper">
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        v-if="gameHistoric.length > 0"
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameHistoric[selectedOption].objgame.away_team+'.png'"
+                    />
+                    </div>
+                </div>
+                </div>
+            </div>
+            <div :class="$style.sliderMatches">
+                <GSCCarousel :current-item-index="selectedOption" v-if="gameHistoric.length > 0" @input="changeCarouselItem" :items="gameHistoric" isMainSlidePriority areSlidesArrowsVisible :areNavigationArrowsVisible="false" slideLeftArrowBackgroundImage="none" slideRightArrowBackgroundImage="none">
+                    <template #default="{ item }">
+                        <div :class="$style.selectoritem">
+                            {{ item.description }}
+                        </div>
+                    </template>
+                </GSCCarousel>
+            </div>
+            <div :class="$style.matchContainer1">
+                <div :class="$style.btnFilterParent">
+                <button :class="$style.btnFilter" id="btn-filters">
+                    <div :class="$style.sortParent">
+                    <img :class="$style.sortIcon" alt="" src="/icn-filter.svg" />
+                    <div :class="$style.filtros">Filtros</div>
+                    </div>
+                    <img :class="$style.shapeIcon" alt="" src="/icn-expand-arrow.svg" />
+                </button>
+                <button :class="$style.btnFilter1" id="btn-filters">
+                    <div :class="$style.sortParent">
+                    <div :class="$style.filtros">Jornada</div>
+                    <div :class="$style.filtros">2</div>
+                    </div>
+                    <img :class="$style.shapeIcon" alt="" src="/icn-expand-arrow.svg" />
+                </button>
+                </div>
+                <div :class="$style.match">
+                <div :class="$style.homeTeam">
+                    <img :class="$style.backArrowIcon" alt="" src="/backarrow.svg" />
+                    <div :class="$style.teamContainer2">
+                    <div :class="$style.manchesterUnited" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.home_team_abbreviation }}</div>
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        v-if="gameHistoric.length > 0"
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameHistoric[selectedOption].objgame.home_team+'.png'"
+                    />
+                    </div>
+                </div>
+                <div :class="$style.scoreContainer1">
+                    <div :class="$style.finalScore">
+                    <div :class="$style.div4" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.score[0] }}</div>
+                    <div :class="$style.div4">-</div>
+                    <div :class="$style.div4" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.score[1] }}</div>
+                    </div>
+                    <div :class="$style.manchesterUnited1">
+                      <template v-if="teamActive == 'home'">
+                        <template v-if="Object.home_match_result == 1">
+                          Ganado
+                        </template>
+                        <template v-if="Object.home_match_result == 2">
+                          Perdido
+                        </template>
+                        <template v-if="Object.home_match_result == 3">
+                          Empatado
+                        </template>
+                      </template>
+                      <template v-else>
+                        <template v-if="Object.visiting_match_result == 1">
+                          Ganado
+                        </template>
+                        <template v-if="Object.visiting_match_result == 2">
+                          Perdido
+                        </template>
+                        <template v-if="Object.visiting_match_result == 3">
+                          Empatado
+                        </template> 
+                      </template>
+                    </div>
+                </div>
+                <div :class="$style.homeTeam">
+                    <div :class="$style.teamContainer2">
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        v-if="gameHistoric.length > 0"
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameHistoric[selectedOption].objgame.away_team+'.png'"
+                    />
+                    <div :class="$style.manchesterUnited" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.away_team_abbreviation }}</div>
+                    </div>
+                    <img :class="$style.backArrowIcon" alt="" src="/nextarrow.svg" />
+                </div>
+                </div>
+                <div :class="$style.btnDetails">
+                <div :class="$style.manchesterUnited2">Ver detalles</div>
+                </div>
+            </div>
+            </div>
+            <div :class="headerSeccionAlineaciones2Class" id="header-mobile">
+            <div :class="$style.switchStatesBig1" id="switch-lineup">
+              <GscSwitchComponent
+                    v-if="(gameInfo.game_status == 0 || gameInfo.game_status == 4) && gameRecientes > 0"
+                    :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="0.5px" 
+                    backgroundOptionDisable="#162533" 
+                    width="600px"
+                    backgroundOptionActive="transparent"
+                    @input="clickOnSelectOption" />
+            </div>
+            <div :class="$style.containerData">
+                <div :class="$style.manchesterUnited13">Alineación utilizada en: </div>
+                
+                <div :class="$style.matchContainer2" id="match-container">
+                <div :class="$style.homeTeamContainer1">
+                    <div :class="$style.teamContainer">
+                    <div :class="$style.imgHomeTeamWrapper">
+                        <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        v-if="gameHistoric.length > 0"
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameHistoric[selectedOption].objgame.home_team+'.png'"
+                        />
+                    </div>
+                    </div>
+                    <div :class="$style.name" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.home_team_abbreviation }}</div>
+                </div>
+                <div :class="$style.scoreContainer2">
+                    <div :class="$style.div" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.score[0] }}</div>
+                    <div :class="$style.div">-</div>
+                    <div :class="$style.div" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.score[1] }}</div>
+                </div>
+                <div :class="$style.homeTeamContainer1">
+                    <div :class="$style.name" v-if="gameHistoric.length > 0">{{ gameHistoric[selectedOption].objgame.away_team_abbreviation }}</div>
+                    <div :class="$style.teamContainer1">
+                    <div :class="$style.imgHomeTeamWrapper">
+                        <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        v-if="gameHistoric.length > 0"
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameHistoric[selectedOption].objgame.away_team+'.png'"
+                        />
+                    </div>
+                    </div>
+                </div>
+                </div>
+                <div :class="$style.sliderMatches1">
+                  <GSCCarousel :current-item-index="selectedOption" v-if="gameHistoric.length > 0" @input="changeCarouselItem" :items="gameHistoric" isMainSlidePriority areSlidesArrowsVisible :areNavigationArrowsVisible="false" slideLeftArrowBackgroundImage="none" slideRightArrowBackgroundImage="none">
+                    <template #default="{ item }">
+                        <div :class="$style.selectoritem2">
+                            {{ item.description }}
+                        </div>
+                    </template>
+                  </GSCCarousel>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+    
+      
+    <script>
+    import '@@/@golstats/gsc-carousel/dist/style.css'
+    import { GSCCarousel } from '@golstats/gsc-carousel'
+    import { GscSwitchComponent } from '@golstats/gsc-switch-component'
+    import '@@/@golstats/gsc-switch-component/dist/style.css'
+    export default {
+        components: {GSCCarousel, GscSwitchComponent},
+        props: { 
+          optionSelected: {
+          type: String,
+          default: 'Historicos',
+        },
+          widthSize: {
+              type: Number,
+              default: 0
+          },
+          gameRecientes: {
+            type: Number,
+            default: 0,
+         },
+          gameInfo: {
+              type: Object,
+              default: () => {},
+          },
+          teamActive: {
+              type: String,
+              default: 'home',
+          },
+          gameHistoric: {
+              type: Array,
+              default: () => [],
+          },
+        },
+        watch: {
+          gameInfo: {
+              immediate: true,
+              handler: async function (newValue) {
+                  try {
+                    this.$emit('input', { season_id: newValue.season_id, game_id: newValue.id });
+                  } catch (e) {
+                      throw new Error(e);
+                  }
+              },
+          },
+      },
+        data() {
+            return {
+              selectedOption: 0,
+              updateIndex: 0,
+              test:  [
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL 12 '`, icon: 'goal' },
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL  73'`, icon: 'goal' },
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL 53'`, icon: 'red-card' },
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL  123'`, icon: 'yellow-card' },
+              ],
+            }
+        },
+        computed: {
+          headerSeccionAlineaciones2Class(){
+            const width = this.widthSize;
+            if (width <= 540) {
+              return this.$style.headerSeccionAlineaciones2540;
+            } else if (width <= 1200) {
+              return this.$style.headerSeccionAlineaciones21200;
+            } else{
+              return this.$style.headerSeccionAlineaciones2;
+            }
+          },
+          headerSeccionAlineaciones1Class(){
+            const width = this.widthSize;
+            if (width <= 540) {
+              return this.$style.headerSeccionAlineaciones1540;
+            } else{
+              return this.$style.headerSeccionAlineaciones1;
+            }
+          },  
+        },
+        methods: {
+          changeCarouselItem(val){
+            this.$emit('input', { season_id: val.selectedItem.season, game_id: val.selectedItem.game, ht_abrev: val.selectedItem.home_team_abbreviation, at_abrev: val.selectedItem.away_team_abbreviation });
+            this.selectedOption = val.selectedItemIndex;
+            this.updateIndex += 1;
+          },
+          clickOnSelectOption(val){
+            this.$emit('clickOnSelectOption', val);
+
+          }
+        }
+    };
+    </script>
+      
+    <style module>
+   @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-poppinshi: Poppins;
+  --font-interhi: Inter;
+
+  /* font sizes */
+  --font-size-3xshi: 10px;
+  --font-size-xshi: 12px;
+  --font-size-smhi: 14px;
+  --font-size-2xshi: 11px;
+  --font-size-4xshi: 9px;
+  --font-size-base-2hi: 15.2px;
+
+  /* Colors */
+  --color-gray-100hi: #172632;
+  --color-gray-200hi: #172531;
+  --color-gray-300hi: rgba(255, 255, 255, 0.7);
+  --color-gray-400hi: rgba(255, 255, 255, 0.3);
+  --color-white: #fff;
+  --color-yellowgreen-100hi: #cbee6b;
+  --color-yellowgreen-200hi: #cbed6e;
+  --color-whitesmokehi: #f4f4f4;
+  --color-darkbluehi: #0234c5;
+  --color-darkslategrayhi: #1e2b36;
+  --color-goldenrodhi: #f7c330;
+  --color-redhi: #ff0000;
+  --color-slategrayhi: #56637b;
+  --color-gray-700hi: rgba(255, 255, 255, 0.7);
+
+  /* Spacing */
+  --sizes-round-corner-round-corner-32hi: 32px;
+  --sizes-spacing-space-24hi: 24px;
+
+  /* Gaps */
+  --gap-basehi: 16px;
+  --gap-3xshi: 10px;
+  --gap-7xshi: 6px;
+  --gap-11xshi: 2px;
+  --gap-8xshi: 5px;
+  --gap-40xlhi: 59px;
+  --gap-4xshi: 9px;
+  --gap-11xlhi: 30px;
+
+  /* Paddings */
+  --padding-basehi: 16px;
+  --padding-5xlhi: 24px;
+  --padding-xshi: 12px;
+  --padding-7xshi: 6px;
+  --padding-11xshi: 2px;
+  --padding-3xshi: 10px;
+  --padding-29xlhi: 48px;
+  --padding-xlhi: 20px;
+  --padding-5xshi: 8px;
+
+  /* Border radiuses */
+  --br-9xshi: 4px;
+  --br-2xs-2hi: 10.2px;
+  --br-31xlhi: 50px;
+  --br-13xlhi: 32px;
+  --br-12xshi: 1px;
+}
+.selectoritem{
+  width: 100%;
+  color: rgba(255, 255, 255, 0.70);
+  text-align: center;
+  font-family: Poppins, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 143.322%;
+  letter-spacing: -0.14px;
+}
+.selectoritem2{
+  width: 100%;
+  color: rgba(255, 255, 255, 0.70);
+  text-align: center;
+  font-family: Poppins, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 143.322%;
+  letter-spacing: -0.14px;
+}
+.gscheaderlineup{
+    width: 100%;
+    height: auto;
+    display: inline-block;
+    margin-bottom: 60px;
+}
+
+    .anNoEstn {
+    font-weight: 500;
+  }
+  .groupsLeague {
+    position: relative;
+    line-height: 20px;
+    margin-top: 15px;
+    margin-bottom: 10px;
+  }
+  .jugadores {
+    position: relative;
+    line-height: 20px;
+    font-weight: 600;
+  }
+  .switchOption {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-darkslategrayhi);
+    border: 0.8px solid var(--color-yellowgreen-100hi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+  }
+  .jugadores1 {
+    position: relative;
+    line-height: 20px;
+    opacity: 0.6;
+  }
+  .switchOption1 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+  }
+  .switchStatesBig {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-gray-100hi);
+    border: 1px solid var(--color-gray-500);
+    display: inline-block;
+    width: 320px;
+    font-size: var(--font-size-xshi);
+    color: var(--color-white);
+  }
+  .groupsLeagueParent {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 30px;
+    text-align: center;
+  }
+  .imgHomeTeamIcon {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    object-fit: cover;
+  }
+  .imgHomeTeamWrapper {
+    border-radius: var(--br-31xlhi);
+    background-color: var(--color-gray-200hi);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi);
+    box-sizing: border-box;
+  }
+  .teamContainer {
+    border-radius: var(--br-31xlhi);
+    border: 1px solid var(--color-darkbluehi);
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi);
+  }
+  .name {
+    position: relative;
+    letter-spacing: 0.31px;
+    line-height: 30.87px;
+    font-weight: 500;
+  }
+  .homeTeamContainer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-slategrayhi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 0px var(--padding-xlhi);
+    gap: var(--gap-3xshi);
+  }
+  .div {
+    position: relative;
+    font-weight: 600;
+  }
+  .scoreContainer {
+    border-radius: var(--br-mid-4);
+    background-color: var(--color-gray-600);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: var(--gap-4xs-7);
+  }
+  .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-white);
+    font-family: var(--font-interhi);
+    margin-top: 27px;
+  }
+  .teamContainer1 {
+    border-radius: var(--br-31xlhi);
+    border: 1px solid var(--color-yellowgreen-200hi);
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi);
+  }
+  .awayTeamContainer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-slategrayhi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px 0px var(--padding-xlhi);
+    gap: var(--gap-3xshi);
+  }
+  .matchContainer {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+/*    padding: 0px 0px var(--padding-xshi); */
+    color: var(--color-whitesmokehi);
+  }
+  .sliderMatchesChild {
+    position: relative;
+    border-radius: 9.55px;
+    width: 7.02px;
+    height: 14.23px;
+  }
+  .manchesterUnited {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+  }
+  .sliderMatchesItem {
+    position: relative;
+    border-radius: 9.55px;
+    width: 7.02px;
+    height: 14.24px;
+  }
+  .sliderMatches {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+/*    padding: var(--padding-11xshi) var(--padding-basehi); */
+    gap: var(--gap-3xshi);
+    text-align: center;
+    width: 320px;
+    margin: 0 auto;
+  }
+  .sortIcon {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .filtros {
+    position: relative;
+    font-size: var(--font-size-smhi);
+    line-height: 24px;
+    font-family: var(--font-poppinshi);
+    color: var(--color-white);
+    text-align: left;
+  }
+  .sortParent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-8xshi);
+  }
+  .shapeIcon {
+    position: relative;
+    width: 8px;
+    height: 4px;
+  }
+  .btnFilter {
+    cursor: pointer;
+    border: 1px solid var(--color-gray-400hi);
+    padding: var(--padding-5xshi) var(--padding-3xshi);
+    background-color: var(--color-gray-300hi);
+    border-radius: var(--br-5xs);
+    box-sizing: border-box;
+    width: 102px;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .btnFilter1 {
+    cursor: pointer;
+    border: 1px solid var(--color-gray-400hi);
+    padding: var(--padding-5xshi) var(--padding-3xshi);
+    background-color: var(--color-gray-300hi);
+    border-radius: var(--br-5xs);
+    box-sizing: border-box;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+  }
+  .btnFilterParent {
+    width: 225px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--gap-xs);
+  }
+  .backArrowIcon {
+    position: relative;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+  }
+  .teamContainer2 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-8xshi);
+  }
+  .homeTeam {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-mini);
+  }
+  .div4 {
+    flex: 1;
+    position: relative;
+    font-weight: 600;
+  }
+  .finalScore {
+    border-radius: var(--br-mid-4);
+    background-color: var(--color-gray-600);
+    border: 0.5px solid var(--color-yellowgreen-100hi);
+    box-sizing: border-box;
+    width: 70.73px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: var(--gap-4xs-7);
+  }
+  .manchesterUnited1 {
+    position: relative;
+    font-size: var(--font-size-xshi);
+    font-weight: 500;
+    font-family: var(--font-poppinshi);
+    color: var(--color-gray-700hi);
+  }
+  .scoreContainer1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-4xshi);
+    text-align: center;
+    font-size: 15.22px;
+    color: var(--color-white);
+    font-family: var(--font-interhi);
+  }
+  .match {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 17px;
+  }
+  .manchesterUnited2 {
+    position: relative;
+    text-decoration: underline;
+    font-weight: 500;
+  }
+  .btnDetails {
+    width: 225px;
+    height: 28px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    font-size: var(--font-size-xshi);
+  }
+  .matchContainer1 {
+    align-self: stretch;
+    display: none;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 4px 0px 0px;
+  }
+  .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;
+  }
+  .manchesterUnited3 {
+    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-4xshi);
+  }
+  .yellowCard {
+    position: relative;
+    border-radius: var(--br-12xshi);
+    background-color: var(--color-goldenrodhi);
+    width: 4px;
+    height: 6px;
+  }
+  .awayTeamEvents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+  }
+  .rectangle {
+    position: relative;
+    border-radius: var(--br-12xshi);
+    background-color: #ff0000;
+    width: 4px;
+    height: 6px;
+  }
+  .homeTeamEvents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+    text-align: right;
+  }
+  .totalEvents {
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 59px;
+    font-size: var(--font-size-4xshi);
+  }
+  .headerSeccionAlineaciones1 {
+    background-color: var(--color-gray-200hi);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 48px;
+    box-sizing: border-box;
+    gap: var(--gap-basehi);
+  }
+  .switchOption3 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-darkslategrayhi);
+    border: 0.8px solid var(--color-yellowgreen-100hi);
+    box-sizing: border-box;
+    width: 74.8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+  }
+  .switchOption4 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    width: 74px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+    box-sizing: border-box;
+  }
+  .switchStatesBig1 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-gray-100hi);
+    border: 1px solid var(--color-gray-500);
+    display: inline-block;
+    width: 280px;
+  }
+  .manchesterUnited13 {
+    position: relative;
+    font-size: 10px;
+    font-weight: 500;
+  }
+  .homeTeamContainer1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+  }
+  .scoreContainer2 {
+    border-radius: var(--br-mid-4);
+    background-color: var(--color-gray-600);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: var(--gap-4xs-7);
+    text-align: center;
+    font-size: 15.22px;
+    color: var(--color-white);
+    font-family: var(--font-interhi);
+  }
+  .matchContainer2 {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 0px var(--padding-xshi);
+    text-align: left;
+    color: var(--color-whitesmokehi);
+  }
+  .manchesterUnited14 {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+    z-index: 0;
+  }
+  .sliderMatchesInner {
+    position: absolute;
+    margin: 0 !important;
+    top: 14.31px;
+    left: 261.07px;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+    z-index: 1;
+  }
+  .rectangleIcon {
+    position: absolute;
+    margin: 0 !important;
+    top: 0.31px;
+    left: 6.41px;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+    z-index: 2;
+  }
+  .sliderMatches1 {
+    display: inline-block;
+    padding: 0px !important;
+    position: relative;
+    gap:0px !important;
+    width: 290px;
+    margin: 0 auto;
+  }
+  .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-basehi) var(--padding-5xlhi) 32px;
+    gap: var(--gap-xs);
+    font-size: var(--font-size-smhi);
+    color: var(--color-gray-700hi);
+  }
+  .headerSeccionAlineaciones2 {
+    align-self: stretch;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-basehi);
+    text-align: center;
+    font-size: var(--font-size-2xshi);
+    color: var(--color-white);
+  }
+  .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-smhi);
+    color: var(--color-gray-700hi);
+    font-family: var(--font-poppinshi); 
+  }
+  .headerSeccionAlineaciones21200 {
+      display: none;
+    }
+    .headerSeccionAlineaciones1540 {
+      display: none;
+    }
+
+    .headerSeccionAlineaciones2540 {
+      display: flex;
+      min-width: 300px;
+      align-self: stretch;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-basehi);
+    text-align: center;
+    font-size: var(--font-size-2xshi);
+    color: var(--color-white);
+    }
+  
+    </style>
+