@golstats/gsc-top-player 1.0.7 → 1.0.8

package/src/components/comparative/gsc-header-tops.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
-    <div v-if="type == 0" :class="$style.headerTopsGames">
-      <div :class="$style.playerRow" id="player-row">
-        <div :class="$style.headerTopGame">
-          <div :class="$style.playerPhotoGames" id="container-player-photp">
-            <div :class="$style.tablePositionWrapperGames">
-              <b :class="$style.tablePositionGames">{{ data.top }}</b>
+    <div v-if="type == 0" :class="$style.headerTopsGamesReports">
+      <div :class="$style.playerRowReports" id="player-row">
+        <div :class="$style.headerTopGameReports">
+          <div :class="$style.playerPhotoGamesReports" id="container-player-photp">
+            <div :class="$style.tablePositionWrapperGamesReports">
+              <b :class="$style.tablePositionGamesReports">{{ data.top }}</b>
             </div>
-            <img :class="$style.imgHenrryIcon" alt="" :src="data.photo" />
-            <img :class="$style.americaIcon" alt="" :src="data.logo" />
+            <img :class="$style.imgHenrryIconReports" alt="" :src="data.photo" />
+            <img :class="$style.americaIconReports" alt="" :src="data.logo" />
           </div>
-          <main :class="$style.playerInfoGames" id="container-player-info">
-            <div :class="$style.playerNameGames">
-              <div :class="$style.toniKroosGames">{{ data.name }}</div>
+          <main :class="$style.playerInfoGamesReports" id="container-player-info">
+            <div :class="$style.playerNameGamesReports">
+              <div :class="$style.toniKroosGamesReports">{{ data.name }}</div>
             </div>
-            <div :class="$style.playerDataGames">
-              <div :class="$style.containerData">
+            <div :class="$style.playerDataGamesReports">
+              <div :class="$style.containerDataReports">
                 <template
                   v-if="canPlayVideos || (game.awayTeam.team_id == teamWidget && typeData != 1)"
                 >
@@ -34,8 +34,8 @@
                     :font-size="buttonFontSize"
                     @click="clickEventMedia(data)"
                   />
-                  <div :class="$style.teamsAmerica">
-                    <img :class="$style.americaIcon1" alt="" :src="data.logo" />
+                  <div :class="$style.teamsAmericaReports">
+                    <img :class="$style.americaIcon1Reports" alt="" :src="data.logo" />
                   </div>
                 </template>
                 <template v-else>
@@ -54,14 +54,18 @@
                     :text-value="data.total + ' ' + categoryName.toLowerCase()"
                     :font-size="buttonFontSize"
                   />
-                  <div :class="$style.teamsAmerica">
-                    <img :class="$style.americaIcon1" alt="" :src="data.logo" />
+                  <div :class="$style.teamsAmericaReports">
+                    <img :class="$style.americaIcon1Reports" alt="" :src="data.logo" />
                   </div>
                 </template>
               </div>
-              <div v-if="arrow" :class="$style.icnExpand" @click="clickExpand(data.player_id)">
+              <div
+                v-if="arrow"
+                :class="$style.icnExpandReports"
+                @click="clickExpand(data.player_id)"
+              >
                 <svg
-                  :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+                  :class="[$style.arrowExpandIconReports, isExpanded ? $style.rotateReports : '']"
                   width="12"
                   height="8"
                   viewBox="0 0 12 8"
@@ -81,20 +85,20 @@
         </div>
       </div>
     </div>
-    <div v-if="type == 1" :class="$style.headerTopsTeams">
-      <div :class="$style.containerHeader" id="header-container">
-        <div :class="$style.headerTopTeam">
-          <div :class="$style.teamPhoto" id="container-team">
-            <div :class="$style.positionWrapper">
-              <b :class="$style.position">{{ data.top }}</b>
+    <div v-if="type == 1" :class="$style.headerTopsTeamsReports">
+      <div :class="$style.containerHeaderReports" id="header-container">
+        <div :class="$style.headerTopTeamReports">
+          <div :class="$style.teamPhotoReports" id="container-team">
+            <div :class="$style.positionWrapperReports">
+              <b :class="$style.positionReports">{{ data.top }}</b>
             </div>
-            <div :class="$style.teamLogo">
-              <img :class="$style.imgNecaxaIcon" alt="" :src="data.logo" />
+            <div :class="$style.teamLogoReports">
+              <img :class="$style.imgNecaxaIconReports" alt="" :src="data.logo" />
             </div>
           </div>
-          <div :class="$style.containerInfoGames">
-            <div :class="$style.leftContainer">
-              <div :class="$style.name">{{ data.name_team }}</div>
+          <div :class="$style.containerInfoGamesReports">
+            <div :class="$style.leftContainerReports">
+              <div :class="$style.nameReports">{{ data.name_team }}</div>
               <GSCButton
                 :icon-size="iconSize"
                 :icon-position="iconPosition"
@@ -110,7 +114,7 @@
                 :font-size="buttonFontSize"
                 @click="clickEventMedia(data)"
               />
-              <div :class="$style.btnVideosOptions1Games">
+              <div :class="$style.btnVideosOptions1GamesReports">
                 <GSCButton
                   :icon-size="iconSize"
                   :icon-position="iconPosition"
@@ -126,12 +130,16 @@
                   :font-size="buttonFontSize"
                   @click="clickEventMedia(data)"
                 />
-                <div :class="$style.verVideosType1">{{ data.total }}</div>
+                <div :class="$style.verVideosType1Reports">{{ data.total }}</div>
               </div>
             </div>
-            <div v-if="arrow" :class="$style.arrowExpand" @click="clickExpand(data.player_id)">
+            <div
+              v-if="arrow"
+              :class="$style.arrowExpandReports"
+              @click="clickExpand(data.player_id)"
+            >
               <svg
-                :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+                :class="[$style.arrowExpandIconReports, isExpanded ? $style.rotateReports : '']"
                 width="12"
                 height="8"
                 viewBox="0 0 12 8"
@@ -336,42 +344,42 @@ body {
 
 :root {
   /* fonts */
-  --font-poppins: 'Poppins-Regular';
-  --font-oswald: 'Oswald-SemiBold';
+  --font-poppins-reports: 'Poppins-Regular';
+  --font-oswald-reports: 'Oswald-SemiBold';
 
   /* font sizes */
-  --font-size-xs: 12px;
-  --font-size-3xs: 10px;
-  --font-size-81xl: 100px;
+  --font-size-xs-reports: 12px;
+  --font-size-3xs-reports: 10px;
+  --font-size-81xl-reports: 100px;
 
   /* Colors */
-  --color-gray-100: rgba(255, 255, 255, 0.08);
-  --color-yellowgreen: #cbee6b;
-  --color-white: #fff;
+  --color-gray-100-reports: rgba(255, 255, 255, 0.08);
+  --color-yellowgreen-reports: #cbee6b;
+  --color-white-reports: #fff;
 
-  --sizes-spacing-space-8: 8px;
-  --sizes-spacing-space-4: 4px;
-  --sizes-round-corner-round-corner-8: 8px;
-  --sizes-spacing-space-40: 40px;
+  --sizes-spacing-space-8-reports: 8px;
+  --sizes-spacing-space-4-reports: 4px;
+  --sizes-round-corner-round-corner-8-reports: 8px;
+  --sizes-spacing-space-40-reports: 40px;
 
   /* Gaps */
-  --gap-base: 16px;
-  --gap-0: 0px;
-  --gap-9xs: 4px;
+  --gap-base-reports: 16px;
+  --gap-0-reports: 0px;
+  --gap-9xs-reports: 4px;
 
   /* Paddings */
-  --padding-3xs: 10px;
-  --padding-5xs: 8px;
-  --padding-xs: 12px;
-  --padding-9xs: 4px;
-  --padding-5xl: 24px;
+  --padding-3xs-reports: 10px;
+  --padding-5xs-reports: 8px;
+  --padding-xs-reports: 12px;
+  --padding-9xs-reports: 4px;
+  --padding-5xl-reports: 24px;
 
   /* Border radiuses */
-  --br-5xs: 8px;
-  --br-45xl: 64px;
+  --br-5xs-reports: 8px;
+  --br-45xl-reports: 64px;
 }
 
-.tablePositionGames {
+.tablePositionGamesReports {
   position: relative;
   letter-spacing: 1.44px;
   display: flex;
@@ -387,7 +395,7 @@ body {
   line-height: 90px;
 }
 
-.tablePositionWrapperGames {
+.tablePositionWrapperGamesReports {
   height: 132px;
   display: flex;
   flex-direction: column;
@@ -396,7 +404,7 @@ body {
   z-index: 0;
 }
 
-.imgHenrryIcon {
+.imgHenrryIconReports {
   position: relative;
   /*      width: 118px; */
   height: 132px;
@@ -404,7 +412,7 @@ body {
   margin-left: -14px;
 }
 
-.americaIcon {
+.americaIconReports {
   position: absolute;
   margin: 0 !important;
   bottom: 14px;
@@ -416,7 +424,7 @@ body {
   z-index: 2;
 }
 
-.playerPhotoGames {
+.playerPhotoGamesReports {
   height: 132px;
   display: flex;
   flex-direction: row;
@@ -425,7 +433,7 @@ body {
   position: relative;
 }
 
-.toniKroosGames {
+.toniKroosGamesReports {
   flex: 1;
   color: v-bind(fontColorName);
   position: relative;
@@ -436,13 +444,13 @@ body {
   font-weight: 500;
 }
 
-.shapeIcon {
+.shapeIconReports {
   position: relative;
   width: 17px;
   height: 16.46px;
 }
 
-.menuiconsTeams {
+.menuiconsTeamsReports {
   width: 20px;
   height: 20px;
   display: flex;
@@ -451,18 +459,18 @@ body {
   justify-content: center;
 }
 
-.component31 {
+.component31Reports {
   width: 32px;
   height: 32px;
   display: flex;
   flex-direction: row;
-  padding: var(--padding-3xs);
+  padding: var(--padding-3xs-reports);
   box-sizing: border-box;
   align-items: flex-start;
   justify-content: center;
 }
 
-.playerNameGames {
+.playerNameGamesReports {
   align-self: stretch;
   display: flex;
   flex-direction: row;
@@ -470,7 +478,7 @@ body {
   justify-content: space-between;
 }
 
-.icnPlayIcon {
+.icnPlayIconReports {
   position: relative;
   width: 12px;
   height: 12px;
@@ -478,14 +486,14 @@ body {
   flex-shrink: 0;
 }
 
-.goles {
+.golesReports {
   position: relative;
   letter-spacing: -0.03em;
   line-height: 120%;
   font-weight: 500;
 }
 
-.americaIcon1 {
+.americaIcon1Reports {
   position: absolute;
   height: 100%;
   width: 100%;
@@ -499,13 +507,13 @@ body {
   object-fit: cover;
 }
 
-.teamsAmerica {
+.teamsAmericaReports {
   position: relative;
   width: 28px;
   height: 28px;
 }
 
-.containerData {
+.containerDataReports {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -513,24 +521,24 @@ body {
   justify-content: space-between;
 }
 
-.shapeIcon1 {
+.shapeIcon1Reports {
   position: relative;
   width: 12px;
   height: 6.04px;
 }
 
-.icnExpand1 {
+.icnExpand1Reports {
   width: 16px;
   height: 16px;
   display: flex;
   flex-direction: column;
-  padding: var(--padding-3xs);
+  padding: var(--padding-3xs-reports);
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
 }
 
-.icnExpand {
+.icnExpandReports {
   width: 32px;
   height: 32px;
   display: flex;
@@ -539,18 +547,18 @@ body {
   justify-content: center;
 }
 
-.playerDataGames {
+.playerDataGamesReports {
   align-self: stretch;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 40px;
-  font-size: var(--font-size-xs);
-  color: var(--color-white);
+  font-size: var(--font-size-xs-reports);
+  color: var(--color-white-reports);
 }
 
-.playerInfoGames {
+.playerInfoGamesReports {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -561,25 +569,25 @@ body {
   text-align: left;
   font-size: 14px;
   color: #f4f4f4;
-  font-family: var(--font-poppins);
+  font-family: var(--font-poppins-reports);
   height: inherit;
 }
 
-.headerTopGame {
+.headerTopGameReports {
   align-self: stretch;
-  border-radius: var(--br-5xs) var(--br-5xs) 0px 0px;
+  border-radius: var(--br-5xs-reports) var(--br-5xs-reports) 0px 0px;
   background-color: v-bind(backgroundColorHeader);
   height: 88px;
   display: flex;
   flex-direction: row;
-  padding: 0px var(--padding-xs) 0px var(--padding-5xs);
+  padding: 0px var(--padding-xs-reports) 0px var(--padding-5xs-reports);
   box-sizing: border-box;
   align-items: flex-end;
   justify-content: flex-start;
   gap: 20px;
 }
 
-.playerRow {
+.playerRowReports {
   align-self: stretch;
   /*      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
   height: 88px;
@@ -590,7 +598,7 @@ body {
   z-index: 0;
 }
 
-.groupsLeague {
+.groupsLeagueReports {
   position: relative;
   line-height: 20px;
   font-weight: 500;
@@ -599,7 +607,7 @@ body {
   color: v-bind(fontColorCategory);
 }
 
-.text {
+.textReports {
   display: flex;
   flex-direction: row;
   padding: 0px 16px;
@@ -607,7 +615,7 @@ body {
   justify-content: center;
 }
 
-.btnViewFullList {
+.btnViewFullListReports {
   margin: 0 !important;
   position: absolute;
   top: 13px;
@@ -615,16 +623,16 @@ body {
   border-bottom: 1px solid v-bind(borderColorCategory);
   display: flex;
   flex-direction: column;
-  padding: 0px 0px var(--padding-5xs);
+  padding: 0px 0px var(--padding-5xs-reports);
   align-items: center;
   justify-content: flex-start;
   z-index: 1;
   text-align: center;
-  font-size: var(--font-size-xs);
-  font-family: var(--font-poppins);
+  font-size: var(--font-size-xs-reports);
+  font-family: var(--font-poppins-reports);
 }
 
-.headerTopsGames {
+.headerTopsGamesReports {
   position: relative;
   width: 100%;
   /*      height: 132px; */
@@ -633,42 +641,44 @@ body {
   flex-direction: column;
   align-items: flex-end;
   justify-content: flex-end;
-  gap: var(--gap-base);
+  gap: var(--gap-base-reports);
   text-align: right;
   font-size: 100px;
-  color: var(--color-white);
-  font-family: var(--font-oswald);
+  color: var(--color-white-reports);
+  font-family: var(--font-oswald-reports);
   /*      box-shadow: 0px 4px 4px 0px #00000040; */
+  container-type: inline-size;
+  container-name: header-tops;
 }
 
-@media screen and (max-width: 1079px) {
-  .playerDataGames {
+@container header-tops (max-width: 1079px) {
+  .playerDataGamesReports {
     gap: 20px;
   }
 }
-@media screen and (max-width: 975px) {
-  .playerDataGames {
+@container header-tops (max-width: 975px) {
+  .playerDataGamesReports {
     gap: 0px;
   }
 }
-@media screen and (max-width: 480px) {
-  .tablePositionGames {
+@container header-tops (max-width: 480px) {
+  .tablePositionGamesReports {
     font-size: 95px;
   }
 
-  .tablePositionWrapperGames {
+  .tablePositionWrapperGamesReports {
     flex: 1;
     height: 132px;
-    gap: var(--gap-0);
+    gap: var(--gap-0-reports);
     padding-top: 9px;
     box-sizing: border-box;
   }
 
-  .imgHenrryIcon {
+  .imgHenrryIconReports {
     height: 132px;
   }
 
-  .americaIcon {
+  .americaIconReports {
     display: flex;
     transform: rotate(0deg);
     position: relative;
@@ -676,55 +686,63 @@ body {
     left: -150px;
   }
 
-  .playerPhotoGames {
+  .playerPhotoGamesReports {
     height: 132px;
-    gap: var(--gap-0);
+    gap: var(--gap-0-reports);
     align-items: center;
     justify-content: space-between;
     padding-bottom: 44px;
     box-sizing: border-box;
   }
 
-  .toniKroosGames {
+  .toniKroosGamesReports {
     font-size: 12px;
     line-height: 15px;
     font-family: 'Poppins-Regular', sans-serif;
     margin-top: 7px;
   }
 
-  .goles {
-    font-size: var(--font-size-3xs);
+  .golesReports {
+    font-size: var(--font-size-3xs-reports);
   }
 
-  .btnVideosOptions {
+  .btnVideosOptionsReports {
+    border-radius: var(--br-45xl-reports);
+    background-color: var(--color-gray-100-reports);
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--color-yellowgreen-reports);
+    display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
+    padding: var(--sizes-spacing-space-4-reports) var(--sizes-spacing-space-8-reports);
+    gap: var(--sizes-spacing-space-4-reports);
     min-width: 64px;
   }
 
-  .teamsAmerica {
+  .teamsAmericaReports {
     display: none;
   }
 
-  .headerTopGame {
-    gap: var(--gap-0);
+  .headerTopGameReports {
+    gap: var(--gap-0-reports);
     align-items: center;
     justify-content: flex-end;
   }
 
-  .playerRow {
+  .playerRowReports {
     gap: -10px;
     align-items: center;
     justify-content: flex-end;
   }
 
-  .groupsLeague {
-    font-size: var(--font-size-3xs);
+  .groupsLeagueReports {
+    font-size: var(--font-size-3xs-reports);
   }
 }
 
-@media screen and (max-width: 380px) {
-  .tablePositionGames {
+@container header-tops (max-width: 380px) {
+  .tablePositionGamesReports {
     font-size: 90px;
     letter-spacing: 1px;
     text-align: left;
@@ -733,18 +751,18 @@ body {
     bottom: -9px;
   }
 
-  .tablePositionWrapperGames {
+  .tablePositionWrapperGamesReports {
     height: 114px;
-    gap: var(--gap-0);
+    gap: var(--gap-0-reports);
     align-items: flex-start;
     justify-content: flex-end;
-    padding-left: var(--padding-5xs);
+    padding-left: var(--padding-5xs-reports);
     padding-top: 36px;
     box-sizing: border-box;
     max-height: 120px;
   }
 
-  .imgHenrryIcon {
+  .imgHenrryIconReports {
     width: 102px;
     height: 114px;
     max-height: 110px;
@@ -753,104 +771,104 @@ body {
     bottom: -6px;
   }
 
-  .americaIcon {
+  .americaIconReports {
     display: none;
     align-self: center;
     align-items: center;
   }
 
-  .playerPhotoGames {
+  .playerPhotoGamesReports {
     width: auto;
     align-self: unset;
     gap: -20px;
     align-items: center;
     justify-content: flex-end;
-    padding-left: var(--padding-5xs);
+    padding-left: var(--padding-5xs-reports);
     box-sizing: border-box;
     min-width: 80px;
     max-width: 160px;
   }
 
-  .toniKroosGames {
-    font-size: var(--font-size-3xs);
+  .toniKroosGamesReports {
+    font-size: var(--font-size-3xs-reports);
     min-width: 120px;
     max-width: 200px;
   }
 
-  .playerNameGames {
-    gap: var(--gap-9xs);
+  .playerNameGamesReports {
+    gap: var(--gap-9xs-reports);
   }
 
-  .goles {
+  .golesReports {
     font-size: 6px;
   }
 
-  .btnVideosOptions {
+  .btnVideosOptionsReports {
     width: auto;
     align-self: unset;
-    padding-left: var(--padding-9xs);
-    padding-right: var(--padding-9xs);
+    padding-left: var(--padding-9xs-reports);
+    padding-right: var(--padding-9xs-reports);
     box-sizing: border-box;
     min-width: 72px;
   }
 
-  .teamsAmerica {
+  .teamsAmericaReports {
     display: flex;
     position: absolute;
     left: 28px;
   }
 
-  .playerDataGames {
-    gap: var(--gap-9xs);
+  .playerDataGamesReports {
+    gap: var(--gap-9xs-reports);
   }
 
-  .playerInfoGames {
+  .playerInfoGamesReports {
     gap: 9px;
   }
 
-  .headerTopGame {
+  .headerTopGameReports {
     height: 80px;
-    gap: var(--gap-0);
+    gap: var(--gap-0-reports);
     align-items: center;
     justify-content: flex-end;
     min-width: 100%;
     max-width: 100%;
   }
 
-  .playerRow {
+  .playerRowReports {
     height: 80px;
     min-width: 300px;
   }
 
-  .groupsLeague {
-    font-size: var(--font-size-3xs);
+  .groupsLeagueReports {
+    font-size: var(--font-size-3xs-reports);
   }
 
-  .btnViewFullList {
+  .btnViewFullListReports {
     position: absolute;
     top: 4px;
   }
 
-  .headerTopsGames {
+  .headerTopsGamesReports {
     align-items: flex-end;
     justify-content: flex-end;
   }
 }
 
-@media screen and (max-width: 350px) {
-  .americaIcon {
+@container header-tops (max-width: 350px) {
+  .americaIconReports {
     display: none;
   }
 
-  .goles {
+  .golesReports {
     flex: 1;
   }
 
-  .btnVideosOptions {
+  .btnVideosOptionsReports {
     min-width: 60px;
   }
 
-  .teamsAmerica {
+  .teamsAmericaReports {
     display: flex;
     position: absolute;
     left: 20px;
@@ -873,7 +891,7 @@ body {
 /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */
 /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */
 /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */
-.position {
+.positionReports {
   align-self: stretch;
   position: relative;
   letter-spacing: 0.31px;
@@ -885,7 +903,7 @@ body {
   flex-shrink: 0;
   opacity: 0.09;
 }
-.positionWrapper {
+.positionWrapperReports {
   align-self: stretch;
   display: flex;
   flex-direction: row;
@@ -893,13 +911,13 @@ body {
   justify-content: center;
   padding: 20px 0px 0px;
 }
-.imgNecaxaIcon {
+.imgNecaxaIconReports {
   position: relative;
   width: 93px;
   height: 93px;
   object-fit: cover;
 }
-.teamLogo {
+.teamLogoReports {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -907,7 +925,7 @@ body {
   padding: 0px 0px 14px;
   margin-left: -24px;
 }
-.teamPhoto {
+.teamPhotoReports {
   height: 107px;
   overflow: hidden;
   display: flex;
@@ -915,7 +933,7 @@ body {
   align-items: flex-start;
   justify-content: flex-start;
 }
-.name {
+.nameReports {
   position: relative;
   font-size: 14px;
   letter-spacing: 0.2px;
@@ -923,44 +941,44 @@ body {
   font-weight: 500;
   color: #f4f4f4;
 }
-.icnPlayIconType1 {
+.icnPlayIconType1Reports {
   position: relative;
   width: 12px;
   height: 12px;
   overflow: hidden;
   flex-shrink: 0;
 }
-.verVideosType1 {
+.verVideosType1Reports {
   position: relative;
   letter-spacing: -0.03em;
   line-height: 120%;
   font-weight: 500;
 }
-.btnVideosOptionsType1 {
-  border-radius: var(--br-45xl);
-  background-color: var(--color-gray-100);
+.btnVideosOptionsType1Reports {
+  border-radius: var(--br-45xl-reports);
+  background-color: var(--color-gray-100-reports);
   backdrop-filter: blur(16px);
-  border: 1px solid var(--color-yellowgreen);
+  border: 1px solid var(--color-yellowgreen-reports);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: var(--sizes-spacing-space-4) var(--sizes-spacing-space-8);
-  gap: var(--sizes-spacing-space-4);
+  padding: var(--sizes-spacing-space-4-reports) var(--sizes-spacing-space-8-reports);
+  gap: var(--sizes-spacing-space-4-reports);
 }
-.btnVideosOptions1Games {
-  border-radius: var(--br-45xl);
-  background-color: var(--color-gray-100);
+.btnVideosOptions1GamesReports {
+  border-radius: var(--br-45xl-reports);
+  background-color: var(--color-gray-100-reports);
   backdrop-filter: blur(16px);
-  border: 1px solid var(--color-yellowgreen);
+  border: 1px solid var(--color-yellowgreen-reports);
   display: none;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: var(--sizes-spacing-space-4) var(--sizes-spacing-space-8);
-  gap: var(--sizes-spacing-space-4);
+  padding: var(--sizes-spacing-space-4-reports) var(--sizes-spacing-space-8-reports);
+  gap: var(--sizes-spacing-space-4-reports);
 }
-.leftContainer {
+.leftContainerReports {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -969,12 +987,12 @@ body {
   justify-content: space-between;
   gap: 18px;
 }
-.shapeIconType1 {
+.shapeIconType1Reports {
   position: relative;
   width: 12px;
   height: 6.04px;
 }
-.icnExpandType1 {
+.icnExpandType1Reports {
   width: 16px;
   height: 16px;
   display: flex;
@@ -984,7 +1002,7 @@ body {
   padding: 10px;
   box-sizing: border-box;
 }
-.arrowExpand {
+.arrowExpandReports {
   width: 32px;
   height: 32px;
   display: flex;
@@ -992,22 +1010,22 @@ body {
   align-items: center;
   justify-content: center;
 }
-.containerInfoGames {
+.containerInfoGamesReports {
   align-self: stretch;
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  gap: var(--sizes-spacing-space-40);
+  gap: var(--sizes-spacing-space-40-reports);
   text-align: left;
-  font-size: var(--font-size-xs);
-  font-family: var(--font-poppins);
+  font-size: var(--font-size-xs-reports);
+  font-family: var(--font-poppins-reports);
 }
-.headerTopTeam {
+.headerTopTeamReports {
   align-self: stretch;
-  border-radius: var(--sizes-round-corner-round-corner-8) var(--sizes-round-corner-round-corner-8) 0
-    0;
+  border-radius: var(--sizes-round-corner-round-corner-8-reports)
+    var(--sizes-round-corner-round-corner-8-reports) 0 0;
   background-color: v-bind(backgroundColorHeader);
   height: 88px;
   display: flex;
@@ -1018,7 +1036,7 @@ body {
   box-sizing: border-box;
   gap: 25px;
 }
-.containerHeader {
+.containerHeaderReports {
   align-self: stretch;
   height: 88px;
   display: flex;
@@ -1027,15 +1045,15 @@ body {
   justify-content: flex-end;
   z-index: 0;
 }
-.goles1 {
+.goles1Reports {
   font-weight: 500;
 }
-.golesType1 {
+.golesType1Reports {
   position: relative;
   letter-spacing: 0.31px;
   line-height: 30.87px;
 }
-.golesWrapper {
+.golesWrapperReports {
   height: 8px;
   display: flex;
   flex-direction: row;
@@ -1044,24 +1062,24 @@ body {
   padding: 0px 16px;
   box-sizing: border-box;
 }
-.btnViewAll {
+.btnViewAllReports {
   margin: 0 !important;
   position: absolute;
   top: 13px;
   right: 8px;
-  border-bottom: 1px solid var(--color-yellowgreen);
+  border-bottom: 1px solid var(--color-yellowgreen-reports);
   box-sizing: border-box;
   height: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0px 0px var(--padding-5xs);
+  padding: 0px 0px var(--padding-5xs-reports);
   z-index: 1;
-  font-size: var(--font-size-xs);
-  font-family: var(--font-poppins);
+  font-size: var(--font-size-xs-reports);
+  font-family: var(--font-poppins-reports);
 }
-.headerTopsTeams {
+.headerTopsTeamsReports {
   position: relative;
   width: 100%;
   /*      height: 132px; */
@@ -1071,70 +1089,74 @@ body {
   justify-content: flex-end;
   gap: 20px;
   text-align: center;
-  font-size: var(--font-size-81xl);
-  color: var(--color-white);
-  font-family: var(--font-oswald);
+  font-size: var(--font-size-81xl-reports);
+  color: var(--color-white-reports);
+  font-family: var(--font-oswald-reports);
+  container-type: inline-size;
+  container-name: header-tops-teams;
 }
 
-@media screen and (max-width: 960px) {
-  .headerTopTeam {
+@container header-tops-teams (max-width: 960px) {
+  .headerTopTeamReports {
     padding: 0px 4px 0px 0px;
     gap: 0px;
   }
-  .teamPhoto {
+  .teamPhotoReports {
     min-width: 170px;
   }
 
-  .containerInfoGames {
+  .containerInfoGamesReports {
     gap: 0px;
   }
 }
 
-@media screen and (max-width: 1232px) {
-  .headerTopsTeams {
+@container header-tops-teams (max-width: 1232px) {
+  .headerTopsTeamsReports {
     width: auto;
     align-self: unset;
   }
 }
-@media screen and (max-width: 420px) {
-  .position {
-    font-size: var(--font-size-81xl);
+@container header-tops-teams (max-width: 420px) {
+  .positionReports {
+    font-size: var(--font-size-81xl-reports);
   }
 
-  .imgNecaxaIcon {
+  .imgNecaxaIconReports {
     width: 93px;
     height: 93px;
   }
 
-  .teamLogo {
+  .teamLogoReports {
     align-items: center;
     justify-content: center;
   }
 
-  .leftContainer {
+  .leftContainerReports {
     gap: 8px;
   }
 
-  .containerInfoGames {
+  .containerInfoGamesReports {
     gap: 0px;
   }
 
-  .headerTopTeam {
+  .headerTopTeamReports {
     padding-left: 0px;
     box-sizing: border-box;
   }
 }
-@media screen and (max-width: 330px) {
-  /* Estilos para botones más pequeños en pantallas menores a 330px */
-  .containerData :deep(.gsc-button) {
+@container header-tops (max-width: 330px) {
+  /* Estilos para botones más pequeños en contenedores menores a 330px */
+  .containerDataReports :deep(.gsc-button) {
     height: 20px !important;
     font-size: 10px !important;
     padding: 2px 8px !important;
     min-width: 60px !important;
     max-width: 120px !important;
   }
+}
 
-  .leftContainer :deep(.gsc-button) {
+@container header-tops-teams (max-width: 330px) {
+  .leftContainerReports :deep(.gsc-button) {
     height: 20px !important;
     font-size: 10px !important;
     padding: 2px 8px !important;
@@ -1143,16 +1165,16 @@ body {
   }
 }
 
-@media screen and (max-width: 320px) {
-  .btnVideosOptionsType1 {
+@container header-tops (max-width: 320px) {
+  .btnVideosOptionsType1Reports {
     display: flex;
   }
 
-  .btnVideosOptions1Games {
+  .btnVideosOptions1GamesReports {
     display: none;
   }
 
-  .toniKroosGames {
+  .toniKroosGamesReports {
     font-size: 10px;
     line-height: 12px;
     word-wrap: break-word;
@@ -1167,28 +1189,28 @@ body {
     overflow: hidden;
   }
 
-  .playerNameGames {
+  .playerNameGamesReports {
     min-height: 30px;
     align-items: flex-start;
   }
 }
-@media screen and (max-width: 460px) {
-  .containerInfoGames {
+@container header-tops-teams (max-width: 460px) {
+  .containerInfoGamesReports {
     gap: 0px;
   }
 }
-@media screen and (max-width: 350px) {
-  .position {
+@container header-tops-teams (max-width: 350px) {
+  .positionReports {
     font-size: 72px;
   }
 
-  .imgNecaxaIcon {
+  .imgNecaxaIconReports {
     width: 72px;
     height: 72px;
   }
 
-  .teamLogo {
-    gap: var(--gap-0);
+  .teamLogoReports {
+    gap: var(--gap-0-reports);
     align-items: center;
     justify-content: center;
     padding-bottom: 25px;
@@ -1196,33 +1218,37 @@ body {
     margin-right: 8px;
   }
 
-  .teamPhoto {
+  .teamPhotoReports {
     gap: 0px;
     align-items: center;
     justify-content: center;
     min-width: auto;
   }
 
-  .headerTopTeam {
+  .headerTopTeamReports {
     padding-left: 0px;
     box-sizing: border-box;
   }
 
-  .positionWrapper {
+  .positionWrapperReports {
     width: 80px;
   }
-  .position {
+  .positionReports {
     font-size: 90px;
     margin-bottom: -5px;
   }
 }
 
-.arrowExpandIcon:hover {
+.arrowExpandIconReports {
+  transition: transform 0.3s ease;
+}
+
+.arrowExpandIconReports:hover {
   opacity: 0.5;
   cursor: pointer;
 }
 
-.rotate {
+.rotateReports {
   transform: rotate(180deg);
 }
 </style>