@golstats/gsc-top-player 1.0.11 → 1.0.13

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

@@ -1,1418 +1,1418 @@
-<template>
-  <div>
-    <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
-                :class="$style.teamIconOverlay"
-                :style="{ backgroundImage: `url(${data.logo})` }"
-              ></div>
-            </div>
-            <img :class="$style.imgHenrryIconReports" alt="" :src="data.photo" />
-            <img :class="$style.americaIconReports" alt="" :src="data.logo" />
-          </div>
-          <main :class="$style.playerInfoGamesReports" id="container-player-info">
-            <div :class="$style.playerNameGamesReports">
-              <div :class="$style.toniKroosGamesReports">{{ data.name }}</div>
-            </div>
-            <div :class="$style.playerDataGamesReports">
-              <div :class="$style.containerDataReports">
-                <template
-                  v-if="canPlayVideos || (game.awayTeam.team_id == teamWidget && typeData != 1)"
-                >
-                  <GSCButton
-                    :icon-size="iconSize"
-                    :icon-position="iconPosition"
-                    :width="buttonWidth"
-                    :button-max-width="buttonMaxWidth"
-                    :height="buttonHeight"
-                    :border-radius="buttonRadius"
-                    :border-width="buttonBorderWidth"
-                    :background-color="buttonBackground"
-                    :font-family="buttonfontFamily"
-                    :border-color="buttonBorderColor"
-                    :text-value="data.total + ' ' + categoryName.toLowerCase()"
-                    :font-size="buttonFontSize"
-                    @click="clickEventMedia(data)"
-                  />
-                  <div :class="$style.teamsAmericaReports">
-                    <img :class="$style.americaIcon1Reports" alt="" :src="data.logo" />
-                  </div>
-                </template>
-                <template v-else>
-                  <GSCButton
-                    :icon="''"
-                    :icon-size="iconSize"
-                    :icon-position="iconPosition"
-                    :width="buttonWidth"
-                    :button-max-width="buttonMaxWidth"
-                    :height="buttonHeight"
-                    :border-radius="buttonRadius"
-                    :border-width="buttonBorderWidth"
-                    :background-color="buttonBackground"
-                    :font-family="buttonfontFamily"
-                    :border-color="buttonBorderColor"
-                    :text-value="data.total + ' ' + categoryName.toLowerCase()"
-                    :font-size="buttonFontSize"
-                  />
-                  <div :class="$style.teamsAmericaReports">
-                    <img :class="$style.americaIcon1Reports" alt="" :src="data.logo" />
-                  </div>
-                </template>
-              </div>
-              <div
-                v-if="arrow"
-                :class="$style.icnExpandReports"
-                @click="clickExpand(data.player_id)"
-              >
-                <svg
-                  :class="[$style.arrowExpandIconReports, isExpanded ? $style.rotateReports : '']"
-                  width="12"
-                  height="8"
-                  viewBox="0 0 12 8"
-                  :fill="colorArrow"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
-                    :fill="colorArrow"
-                  />
-                </svg>
-              </div>
-            </div>
-          </main>
-        </div>
-      </div>
-    </div>
-    <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.teamLogoReports">
-              <img :class="$style.imgNecaxaIconReports" alt="" :src="data.logo" />
-            </div>
-          </div>
-          <div :class="$style.containerInfoGamesReports">
-            <div :class="$style.leftContainerReports">
-              <div :class="$style.nameReports">{{ data.name_team }}</div>
-              <GSCButton
-                :icon-size="iconSize"
-                :icon-position="iconPosition"
-                :width="buttonWidth"
-                :button-max-width="buttonMaxWidth"
-                :height="buttonHeight"
-                :border-radius="buttonRadius"
-                :border-width="buttonBorderWidth"
-                :background-color="buttonBackground"
-                :font-family="buttonfontFamily"
-                :border-color="buttonBorderColor"
-                :text-value="data.total + ' ' + categoryName.toLowerCase()"
-                :font-size="buttonFontSize"
-                @click="clickEventMedia(data)"
-              />
-              <div :class="$style.btnVideosOptions1GamesReports">
-                <GSCButton
-                  :icon-size="iconSize"
-                  :icon-position="iconPosition"
-                  :width="buttonWidth"
-                  :button-max-width="buttonMaxWidth"
-                  :height="buttonHeight"
-                  :border-radius="buttonRadius"
-                  :border-width="buttonBorderWidth"
-                  :background-color="buttonBackground"
-                  :font-family="buttonfontFamily"
-                  :border-color="buttonBorderColor"
-                  :text-value="data.total + ' ' + categoryName.toLowerCase()"
-                  :font-size="buttonFontSize"
-                  @click="clickEventMedia(data)"
-                />
-                <div :class="$style.verVideosType1Reports">{{ data.total }}</div>
-              </div>
-            </div>
-            <div
-              v-if="arrow"
-              :class="$style.arrowExpandReports"
-              @click="clickExpand(data.player_id)"
-            >
-              <svg
-                :class="[$style.arrowExpandIconReports, isExpanded ? $style.rotateReports : '']"
-                width="12"
-                height="8"
-                viewBox="0 0 12 8"
-                :fill="colorArrow"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
-                  :fill="colorArrow"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import GSCButton from './gsc-button.vue'
-export default {
-  components: {
-    GSCButton,
-  },
-  props: {
-    typeData: {
-      type: Number,
-      default: 1,
-    },
-    teamWidget: {
-      type: Number,
-      default: 0,
-    },
-    game: {
-      type: Object,
-      default: () => {},
-    },
-    type: {
-      type: Number,
-      default: 0,
-    },
-    isExpanded: {
-      type: Boolean,
-      default: false,
-    },
-    canPlayVideos: {
-      type: Boolean,
-      default: false,
-    },
-    arrow: {
-      type: Boolean,
-      default: false,
-    },
-    categoryName: {
-      type: String,
-      default: '',
-    },
-    categoryId: {
-      type: String,
-      default: '',
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-    backgroundColor: {
-      type: String,
-      default: '#0d1d29',
-    },
-    backgroundColorHeader: {
-      type: String,
-      default: '#183143',
-    },
-    fontColorName: {
-      type: String,
-      default: '#F4F4F4',
-    },
-    fontSizeName: {
-      type: String,
-      default: '14px',
-    },
-    fontFamilyName: {
-      type: String,
-      default: 'Poppins-Regular',
-    },
-    fontColorTopNum: {
-      type: String,
-      default: '#FFFFFF',
-    },
-    fontSizeTopNum: {
-      type: String,
-      default: '96px',
-    },
-    fontFamilyTopNum: {
-      type: String,
-      default: 'Oswald-Bold',
-    },
-    fontColorCategory: {
-      type: String,
-      default: '#FFFFFF',
-    },
-    fontSizeCategory: {
-      type: String,
-      default: '12px',
-    },
-    fontFamilyCategory: {
-      type: String,
-      default: 'Poppins-Regular',
-    },
-    opacityColorTopNum: {
-      type: Number,
-      default: 0.09,
-    },
-    borderColorCategory: {
-      type: String,
-      default: '#cbee6b',
-    },
-
-    iconSize: {
-      type: String,
-      default: '18px',
-    },
-    iconPosition: {
-      type: String,
-      default: 'left',
-    },
-    colorArrow: {
-      type: String,
-      default: '#D9D9D9',
-    },
-    buttonWidth: {
-      type: String,
-      default: 'fit-content',
-    },
-    buttonMaxWidth: {
-      type: String,
-      default: '180px',
-    },
-    buttonHeight: {
-      type: String,
-      default: '24px',
-    },
-    buttonRadius: {
-      type: String,
-      default: '30px',
-    },
-    buttonBorderWidth: {
-      type: Number,
-      default: 1,
-    },
-    buttonBackground: {
-      type: String,
-      default: '#ffffff1a',
-    },
-    buttonfontFamily: {
-      type: String,
-      default: 'Poppins-Regular',
-    },
-    buttonBorderColor: {
-      type: String,
-      default: '#cbee6b',
-    },
-    buttonFontSize: {
-      type: String,
-      default: '12px',
-    },
-  },
-  data: () => ({
-    expand: false,
-  }),
-  methods: {
-    viewProfile(data) {
-      this.$emit('play', data)
-    },
-    clickMore(category) {
-      this.$emit('more', category)
-    },
-    clickExpand(id_player) {
-      //      this.expand = !this.expand
-      this.$emit('expand', { expand: !this.isExpanded, id: id_player })
-    },
-    clickFav(data) {
-      this.$emit('fav', data)
-    },
-    clickEventMedia(data) {
-      this.$emit('mediadata', data)
-    },
-  },
-}
-</script>
-
-<style module>
-@import '/css/fonts.css';
-
-body {
-  margin: 0;
-  line-height: normal;
-}
-
-:root {
-  /* fonts */
-  --font-poppins-reports: 'Poppins-Regular';
-  --font-oswald-reports: 'Oswald-SemiBold';
-
-  /* font sizes */
-  --font-size-xs-reports: 12px;
-  --font-size-3xs-reports: 10px;
-  --font-size-81xl-reports: 100px;
-
-  /* Colors */
-  --color-gray-100-reports: rgba(255, 255, 255, 0.08);
-  --color-yellowgreen-reports: #cbee6b;
-  --color-white-reports: #fff;
-
-  --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-reports: 16px;
-  --gap-0-reports: 0px;
-  --gap-9xs-reports: 4px;
-
-  /* Paddings */
-  --padding-3xs-reports: 10px;
-  --padding-5xs-reports: 8px;
-  --padding-xs-reports: 12px;
-  --padding-9xs-reports: 4px;
-  --padding-5xl-reports: 24px;
-
-  /* Border radiuses */
-  --br-5xs-reports: 8px;
-  --br-45xl-reports: 64px;
-}
-
-.tablePositionGamesReports {
-  position: relative;
-  letter-spacing: 1.44px;
-  display: flex;
-  font-size: v-bind(fontSizeTopNum);
-  align-items: flex-end;
-  font-family: v-bind(fontFamilyTopNum);
-  width: 96px;
-  color: v-bind(fontColorTopNum) !important;
-  height: 81px;
-  flex-shrink: 0;
-  opacity: v-bind(opacityColorTopNum);
-  mix-blend-mode: normal;
-  line-height: 90px;
-}
-
-.tablePositionWrapperGamesReports {
-  height: 132px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  z-index: 0;
-}
-
-.imgHenrryIconReports {
-  position: relative;
-  /*      width: 118px; */
-  height: 132px;
-  z-index: 1;
-  margin-left: -14px;
-}
-
-.americaIconReports {
-  position: absolute;
-  margin: 0 !important;
-  bottom: 14px;
-  left: 27px;
-  width: 28px;
-  height: 28px;
-  object-fit: cover;
-  display: none;
-  z-index: 2;
-}
-
-.playerPhotoGamesReports {
-  height: 132px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: flex-start;
-  position: relative;
-}
-
-.toniKroosGamesReports {
-  flex: 1;
-  color: v-bind(fontColorName);
-  position: relative;
-  font-family: v-bind(fontFamilyName);
-  font-size: v-bind(fontSizeName);
-  letter-spacing: 0.2px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-.shapeIconReports {
-  position: relative;
-  width: 17px;
-  height: 16.46px;
-}
-
-.menuiconsTeamsReports {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.component31Reports {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  padding: var(--padding-3xs-reports);
-  box-sizing: border-box;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.playerNameGamesReports {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-}
-
-.icnPlayIconReports {
-  position: relative;
-  width: 12px;
-  height: 12px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.golesReports {
-  position: relative;
-  letter-spacing: -0.03em;
-  line-height: 120%;
-  font-weight: 500;
-}
-
-.americaIcon1Reports {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  max-width: 100%;
-  overflow: hidden;
-  max-height: 100%;
-  object-fit: cover;
-}
-
-.teamsAmericaReports {
-  position: relative;
-  width: 28px;
-  height: 28px;
-}
-
-.containerDataReports {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.shapeIcon1Reports {
-  position: relative;
-  width: 12px;
-  height: 6.04px;
-}
-
-.icnExpand1Reports {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  flex-direction: column;
-  padding: var(--padding-3xs-reports);
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-}
-
-.icnExpandReports {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.playerDataGamesReports {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 40px;
-  font-size: var(--font-size-xs-reports);
-  color: var(--color-white-reports);
-}
-
-.playerInfoGamesReports {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0px;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  text-align: left;
-  font-size: 14px;
-  color: #f4f4f4;
-  font-family: var(--font-poppins-reports);
-  height: inherit;
-}
-
-.headerTopGameReports {
-  align-self: stretch;
-  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-reports) 0px var(--padding-5xs-reports);
-  box-sizing: border-box;
-  align-items: flex-end;
-  justify-content: flex-start;
-  gap: 20px;
-}
-
-.playerRowReports {
-  align-self: stretch;
-  /*      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
-  height: 88px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 0;
-}
-
-.groupsLeagueReports {
-  position: relative;
-  line-height: 20px;
-  font-weight: 500;
-  font-family: v-bind(fontFamilyCategory);
-  font-size: v-bind(fontSizeCategory);
-  color: v-bind(fontColorCategory);
-}
-
-.textReports {
-  display: flex;
-  flex-direction: row;
-  padding: 0px 16px;
-  align-items: center;
-  justify-content: center;
-}
-
-.btnViewFullListReports {
-  margin: 0 !important;
-  position: absolute;
-  top: 13px;
-  right: 8px;
-  border-bottom: 1px solid v-bind(borderColorCategory);
-  display: flex;
-  flex-direction: column;
-  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-reports);
-  font-family: var(--font-poppins-reports);
-}
-
-.headerTopsGamesReports {
-  position: relative;
-  width: 100%;
-  /*      height: 132px; */
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-end;
-  gap: var(--gap-base-reports);
-  text-align: right;
-  font-size: 100px;
-  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;
-}
-
-@container header-tops (max-width: 1079px) {
-  .playerDataGamesReports {
-    gap: 20px;
-  }
-}
-@container header-tops (max-width: 975px) {
-  .playerDataGamesReports {
-    gap: 0px;
-  }
-}
-@container header-tops (max-width: 480px) {
-  .tablePositionGamesReports {
-    font-size: 95px;
-  }
-
-  .tablePositionWrapperGamesReports {
-    flex: 1;
-    height: 132px;
-    gap: var(--gap-0-reports);
-    padding-top: 9px;
-    box-sizing: border-box;
-  }
-
-  .imgHenrryIconReports {
-    height: 132px;
-  }
-
-  .americaIconReports {
-    display: flex;
-    transform: rotate(0deg);
-    position: relative;
-    bottom: -40px;
-    left: -150px;
-  }
-
-  .playerPhotoGamesReports {
-    height: 132px;
-    gap: var(--gap-0-reports);
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: 44px;
-    box-sizing: border-box;
-  }
-
-  .toniKroosGamesReports {
-    font-size: 12px;
-    line-height: 15px;
-    font-family: 'Poppins-Regular', sans-serif;
-    margin-top: 7px;
-  }
-
-  .golesReports {
-    font-size: var(--font-size-3xs-reports);
-  }
-
-  .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;
-  }
-
-  .teamsAmericaReports {
-    display: none;
-  }
-
-  .headerTopGameReports {
-    gap: var(--gap-0-reports);
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .playerRowReports {
-    gap: -10px;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .groupsLeagueReports {
-    font-size: var(--font-size-3xs-reports);
-  }
-}
-
-@container header-tops (max-width: 380px) {
-  .tablePositionGamesReports {
-    font-size: 90px;
-    letter-spacing: 1px;
-    text-align: left;
-    position: relative;
-    left: -9px;
-    bottom: -9px;
-  }
-
-  .tablePositionWrapperGamesReports {
-    height: 114px;
-    gap: var(--gap-0-reports);
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding-left: var(--padding-5xs-reports);
-    padding-top: 36px;
-    box-sizing: border-box;
-    max-height: 120px;
-  }
-
-  .imgHenrryIconReports {
-    width: 102px;
-    height: 114px;
-    max-height: 110px;
-    position: relative;
-    left: -10px;
-    bottom: -6px;
-  }
-
-  .americaIconReports {
-    display: none;
-    align-self: center;
-    align-items: center;
-  }
-
-  .playerPhotoGamesReports {
-    width: auto;
-    align-self: unset;
-    gap: -20px;
-    align-items: center;
-    justify-content: flex-end;
-    padding-left: var(--padding-5xs-reports);
-    box-sizing: border-box;
-    min-width: 80px;
-    max-width: 160px;
-  }
-
-  .toniKroosGamesReports {
-    font-size: var(--font-size-3xs-reports);
-    min-width: 120px;
-    max-width: 200px;
-  }
-
-  .playerNameGamesReports {
-    gap: var(--gap-9xs-reports);
-  }
-
-  .golesReports {
-    font-size: 6px;
-  }
-
-  .btnVideosOptionsReports {
-    width: auto;
-    align-self: unset;
-    padding-left: var(--padding-9xs-reports);
-    padding-right: var(--padding-9xs-reports);
-    box-sizing: border-box;
-    min-width: 72px;
-  }
-
-  .teamsAmericaReports {
-    display: flex;
-    position: absolute;
-    left: 28px;
-  }
-
-  .playerDataGamesReports {
-    gap: var(--gap-9xs-reports);
-  }
-
-  .playerInfoGamesReports {
-    gap: 9px;
-  }
-
-  .headerTopGameReports {
-    height: 80px;
-    gap: var(--gap-0-reports);
-    align-items: center;
-    justify-content: flex-end;
-    min-width: 100%;
-    max-width: 100%;
-  }
-
-  .playerRowReports {
-    height: 80px;
-  }
-
-  .groupsLeagueReports {
-    font-size: var(--font-size-3xs-reports);
-  }
-
-  .btnViewFullListReports {
-    position: absolute;
-    top: 4px;
-  }
-
-  .headerTopsGamesReports {
-    align-items: flex-end;
-    justify-content: flex-end;
-  }
-}
-
-@container header-tops (max-width: 350px) {
-  .americaIconReports {
-    display: none;
-  }
-
-  .golesReports {
-    flex: 1;
-  }
-
-  .btnVideosOptionsReports {
-    min-width: 60px;
-  }
-
-  .teamsAmericaReports {
-    display: flex;
-    position: absolute;
-    left: 20px;
-  }
-}
-
-@container header-tops (max-width: 300px) {
-  .headerTopGameReports {
-    position: relative;
-    height: 88px;
-    align-items: flex-end;
-    justify-content: flex-start;
-    padding: 0px 8px 0px 4px;
-    gap: 20px;
-    overflow: visible;
-  }
-
-  .playerPhotoGamesReports {
-    position: relative;
-    height: 132px;
-    padding-bottom: 8px !important;
-    justify-content: flex-end;
-    align-items: flex-end;
-    z-index: 1;
-  }
-
-  #container-player-info {
-    position: absolute !important;
-    right: 8px !important;
-    z-index: 10 !important;
-    width: auto !important;
-    gap: 4px !important;
-    align-items: flex-end !important;
-    justify-content: flex-end !important;
-    border-radius: 6px !important;
-    backdrop-filter: blur(2px) !important;
-  }
-
-  .playerInfoGamesReports {
-    position: absolute !important;
-    right: 8px !important;
-    top: -12px !important;
-    z-index: 10 !important;
-    width: auto !important;
-    gap: 4px !important;
-    align-items: flex-end !important;
-    justify-content: flex-end !important;
-    border-radius: 6px !important;
-  }
-
-  .playerNameGamesReports {
-    width: auto;
-    text-align: right;
-    justify-content: flex-end;
-    margin-bottom: 0;
-    z-index: 11;
-  }
-
-  .toniKroosGamesReports {
-    font-size: 9px;
-    line-height: 11px;
-    text-align: right;
-    max-width: 100px;
-    margin: 0;
-    font-weight: 600;
-    color: #ffffff;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
-  }
-
-  .playerDataGamesReports {
-    width: auto;
-    justify-content: flex-end;
-    gap: 6px;
-    flex-wrap: nowrap;
-    z-index: 11;
-  }
-
-  .containerDataReports {
-    justify-content: flex-end;
-    gap: 6px;
-    flex-wrap: nowrap;
-    z-index: 11;
-  }
-
-  .containerDataReports :deep(.gsc-button) {
-    z-index: 12;
-    position: relative;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  }
-
-  .tablePositionWrapperGamesReports {
-    position: relative;
-    z-index: 0;
-    height: 132px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding-bottom: 0;
-  }
-
-  .tablePositionGamesReports {
-    font-size: v-bind(fontSizeTopNum);
-    line-height: 90px;
-    opacity: v-bind(opacityColorTopNum);
-    color: v-bind(fontColorTopNum);
-    width: 96px;
-    height: 81px;
-    margin-bottom: 0;
-  }
-
-  .imgHenrryIconReports {
-    height: 132px;
-    width: auto;
-    margin-left: -14px;
-    position: relative;
-    z-index: 1;
-    display: block;
-    margin-bottom: 0;
-  }
-
-  .americaIconReports {
-    display: none;
-  }
-
-  .americaIcon1Reports {
-    display: none;
-  }
-
-  .teamsAmericaReports {
-    display: none;
-  }
-
-  .tablePositionWrapperGamesReports {
-    position: relative;
-  }
-
-  .teamIconOverlay {
-    position: absolute;
-    top: 92px;
-    left: 28px;
-    width: 28px;
-    height: 28px;
-    z-index: 5;
-    border-radius: 50%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .playerRowReports {
-    height: 88px;
-    position: relative;
-  }
-
-  .headerTopsGamesReports {
-    height: 88px;
-    position: relative;
-  }
-
-  .icnExpandReports {
-    z-index: 11;
-    position: relative;
-  }
-}
-
-/** 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 */
-/** 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 */
-/** 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 */
-/** 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 */
-/** 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 */
-/** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */
-.positionReports {
-  align-self: stretch;
-  position: relative;
-  letter-spacing: 0.31px;
-  line-height: 30.87px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 95px;
-  flex-shrink: 0;
-  opacity: 0.09;
-}
-.positionWrapperReports {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 20px 0px 0px;
-}
-.imgNecaxaIconReports {
-  position: relative;
-  width: 93px;
-  height: 93px;
-  object-fit: cover;
-}
-.teamLogoReports {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 0px 14px;
-  margin-left: -24px;
-}
-.teamPhotoReports {
-  height: 107px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.nameReports {
-  position: relative;
-  font-size: 14px;
-  letter-spacing: 0.2px;
-  line-height: 20px;
-  font-weight: 500;
-  color: #f4f4f4;
-}
-.icnPlayIconType1Reports {
-  position: relative;
-  width: 12px;
-  height: 12px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.verVideosType1Reports {
-  position: relative;
-  letter-spacing: -0.03em;
-  line-height: 120%;
-  font-weight: 500;
-}
-.btnVideosOptionsType1Reports {
-  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);
-}
-.btnVideosOptions1GamesReports {
-  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: none;
-  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);
-}
-.leftContainerReports {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-}
-.shapeIconType1Reports {
-  position: relative;
-  width: 12px;
-  height: 6.04px;
-}
-.icnExpandType1Reports {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  box-sizing: border-box;
-}
-.arrowExpandReports {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.containerInfoGamesReports {
-  align-self: stretch;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--sizes-spacing-space-40-reports);
-  text-align: left;
-  font-size: var(--font-size-xs-reports);
-  font-family: var(--font-poppins-reports);
-}
-.headerTopTeamReports {
-  align-self: stretch;
-  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;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: flex-start;
-  padding: 0px 12px;
-  box-sizing: border-box;
-  gap: 25px;
-}
-.containerHeaderReports {
-  align-self: stretch;
-  height: 88px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  z-index: 0;
-}
-.goles1Reports {
-  font-weight: 500;
-}
-.golesType1Reports {
-  position: relative;
-  letter-spacing: 0.31px;
-  line-height: 30.87px;
-}
-.golesWrapperReports {
-  height: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 16px;
-  box-sizing: border-box;
-}
-.btnViewAllReports {
-  margin: 0 !important;
-  position: absolute;
-  top: 13px;
-  right: 8px;
-  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-reports);
-  z-index: 1;
-  font-size: var(--font-size-xs-reports);
-  font-family: var(--font-poppins-reports);
-}
-.headerTopsTeamsReports {
-  position: relative;
-  width: 100%;
-  /*      height: 132px; */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 20px;
-  text-align: center;
-  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;
-}
-
-@container header-tops-teams (max-width: 960px) {
-  .headerTopTeamReports {
-    padding: 0px 4px 0px 0px;
-    gap: 0px;
-  }
-  .teamPhotoReports {
-    min-width: 170px;
-  }
-
-  .containerInfoGamesReports {
-    gap: 0px;
-  }
-}
-
-@container header-tops-teams (max-width: 1232px) {
-  .headerTopsTeamsReports {
-    width: auto;
-    align-self: unset;
-  }
-}
-@container header-tops-teams (max-width: 420px) {
-  .positionReports {
-    font-size: var(--font-size-81xl-reports);
-  }
-
-  .imgNecaxaIconReports {
-    width: 93px;
-    height: 93px;
-  }
-
-  .teamLogoReports {
-    align-items: center;
-    justify-content: center;
-  }
-
-  .leftContainerReports {
-    gap: 8px;
-  }
-
-  .containerInfoGamesReports {
-    gap: 0px;
-  }
-
-  .headerTopTeamReports {
-    padding-left: 0px;
-    box-sizing: border-box;
-  }
-}
-@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;
-  }
-}
-
-@container header-tops-teams (max-width: 330px) {
-  .leftContainerReports :deep(.gsc-button) {
-    height: 20px !important;
-    font-size: 10px !important;
-    padding: 2px 8px !important;
-    min-width: 60px !important;
-    max-width: 120px !important;
-  }
-}
-
-@container header-tops (max-width: 320px) {
-  .btnVideosOptionsType1Reports {
-    display: flex;
-  }
-
-  .btnVideosOptions1GamesReports {
-    display: none;
-  }
-
-  .toniKroosGamesReports {
-    font-size: 10px;
-    line-height: 12px;
-    word-wrap: break-word;
-    white-space: normal;
-    overflow-wrap: break-word;
-    hyphens: auto;
-    max-width: 100px;
-    min-height: 24px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .playerNameGamesReports {
-    min-height: 30px;
-    align-items: flex-start;
-  }
-}
-@container header-tops-teams (max-width: 460px) {
-  .containerInfoGamesReports {
-    gap: 0px;
-  }
-}
-@container header-tops-teams (max-width: 350px) {
-  .positionReports {
-    font-size: 72px;
-  }
-
-  .imgNecaxaIconReports {
-    width: 72px;
-    height: 72px;
-  }
-
-  .teamLogoReports {
-    gap: var(--gap-0-reports);
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 25px;
-    box-sizing: border-box;
-    margin-right: 8px;
-  }
-
-  .teamPhotoReports {
-    gap: 0px;
-    align-items: center;
-    justify-content: center;
-    min-width: auto;
-  }
-
-  .headerTopTeamReports {
-    padding-left: 0px;
-    box-sizing: border-box;
-  }
-
-  .positionWrapperReports {
-    width: 80px;
-  }
-  .positionReports {
-    font-size: 90px;
-    margin-bottom: -5px;
-  }
-}
-
-.arrowExpandIconReports {
-  transition: transform 0.3s ease;
-}
-
-.arrowExpandIconReports:hover {
-  opacity: 0.5;
-  cursor: pointer;
-}
-
-.rotateReports {
-  transform: rotate(180deg);
-}
-</style>
+<template>
+  <div>
+    <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
+                :class="$style.teamIconOverlay"
+                :style="{ backgroundImage: `url(${data.logo})` }"
+              ></div>
+            </div>
+            <img :class="$style.imgHenrryIconReports" alt="" :src="data.photo" />
+            <img :class="$style.americaIconReports" alt="" :src="data.logo" />
+          </div>
+          <main :class="$style.playerInfoGamesReports" id="container-player-info">
+            <div :class="$style.playerNameGamesReports">
+              <div :class="$style.toniKroosGamesReports">{{ data.name }}</div>
+            </div>
+            <div :class="$style.playerDataGamesReports">
+              <div :class="$style.containerDataReports">
+                <template
+                  v-if="canPlayVideos || (game.awayTeam.team_id == teamWidget && typeData != 1)"
+                >
+                  <GSCButton
+                    :icon-size="iconSize"
+                    :icon-position="iconPosition"
+                    :width="buttonWidth"
+                    :button-max-width="buttonMaxWidth"
+                    :height="buttonHeight"
+                    :border-radius="buttonRadius"
+                    :border-width="buttonBorderWidth"
+                    :background-color="buttonBackground"
+                    :font-family="buttonfontFamily"
+                    :border-color="buttonBorderColor"
+                    :text-value="data.total + ' ' + categoryName.toLowerCase()"
+                    :font-size="buttonFontSize"
+                    @click="clickEventMedia(data)"
+                  />
+                  <div :class="$style.teamsAmericaReports">
+                    <img :class="$style.americaIcon1Reports" alt="" :src="data.logo" />
+                  </div>
+                </template>
+                <template v-else>
+                  <GSCButton
+                    :icon="''"
+                    :icon-size="iconSize"
+                    :icon-position="iconPosition"
+                    :width="buttonWidth"
+                    :button-max-width="buttonMaxWidth"
+                    :height="buttonHeight"
+                    :border-radius="buttonRadius"
+                    :border-width="buttonBorderWidth"
+                    :background-color="buttonBackground"
+                    :font-family="buttonfontFamily"
+                    :border-color="buttonBorderColor"
+                    :text-value="data.total + ' ' + categoryName.toLowerCase()"
+                    :font-size="buttonFontSize"
+                  />
+                  <div :class="$style.teamsAmericaReports">
+                    <img :class="$style.americaIcon1Reports" alt="" :src="data.logo" />
+                  </div>
+                </template>
+              </div>
+              <div
+                v-if="arrow"
+                :class="$style.icnExpandReports"
+                @click="clickExpand(data.player_id)"
+              >
+                <svg
+                  :class="[$style.arrowExpandIconReports, isExpanded ? $style.rotateReports : '']"
+                  width="12"
+                  height="8"
+                  viewBox="0 0 12 8"
+                  :fill="colorArrow"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
+                    :fill="colorArrow"
+                  />
+                </svg>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <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.teamLogoReports">
+              <img :class="$style.imgNecaxaIconReports" alt="" :src="data.logo" />
+            </div>
+          </div>
+          <div :class="$style.containerInfoGamesReports">
+            <div :class="$style.leftContainerReports">
+              <div :class="$style.nameReports">{{ data.name_team }}</div>
+              <GSCButton
+                :icon-size="iconSize"
+                :icon-position="iconPosition"
+                :width="buttonWidth"
+                :button-max-width="buttonMaxWidth"
+                :height="buttonHeight"
+                :border-radius="buttonRadius"
+                :border-width="buttonBorderWidth"
+                :background-color="buttonBackground"
+                :font-family="buttonfontFamily"
+                :border-color="buttonBorderColor"
+                :text-value="data.total + ' ' + categoryName.toLowerCase()"
+                :font-size="buttonFontSize"
+                @click="clickEventMedia(data)"
+              />
+              <div :class="$style.btnVideosOptions1GamesReports">
+                <GSCButton
+                  :icon-size="iconSize"
+                  :icon-position="iconPosition"
+                  :width="buttonWidth"
+                  :button-max-width="buttonMaxWidth"
+                  :height="buttonHeight"
+                  :border-radius="buttonRadius"
+                  :border-width="buttonBorderWidth"
+                  :background-color="buttonBackground"
+                  :font-family="buttonfontFamily"
+                  :border-color="buttonBorderColor"
+                  :text-value="data.total + ' ' + categoryName.toLowerCase()"
+                  :font-size="buttonFontSize"
+                  @click="clickEventMedia(data)"
+                />
+                <div :class="$style.verVideosType1Reports">{{ data.total }}</div>
+              </div>
+            </div>
+            <div
+              v-if="arrow"
+              :class="$style.arrowExpandReports"
+              @click="clickExpand(data.player_id)"
+            >
+              <svg
+                :class="[$style.arrowExpandIconReports, isExpanded ? $style.rotateReports : '']"
+                width="12"
+                height="8"
+                viewBox="0 0 12 8"
+                :fill="colorArrow"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
+                  :fill="colorArrow"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import GSCButton from './gsc-button.vue'
+export default {
+  components: {
+    GSCButton,
+  },
+  props: {
+    typeData: {
+      type: Number,
+      default: 1,
+    },
+    teamWidget: {
+      type: Number,
+      default: 0,
+    },
+    game: {
+      type: Object,
+      default: () => {},
+    },
+    type: {
+      type: Number,
+      default: 0,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    canPlayVideos: {
+      type: Boolean,
+      default: false,
+    },
+    arrow: {
+      type: Boolean,
+      default: false,
+    },
+    categoryName: {
+      type: String,
+      default: '',
+    },
+    categoryId: {
+      type: String,
+      default: '',
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    backgroundColor: {
+      type: String,
+      default: '#0d1d29',
+    },
+    backgroundColorHeader: {
+      type: String,
+      default: '#183143',
+    },
+    fontColorName: {
+      type: String,
+      default: '#F4F4F4',
+    },
+    fontSizeName: {
+      type: String,
+      default: '14px',
+    },
+    fontFamilyName: {
+      type: String,
+      default: 'Poppins-Regular',
+    },
+    fontColorTopNum: {
+      type: String,
+      default: '#FFFFFF',
+    },
+    fontSizeTopNum: {
+      type: String,
+      default: '96px',
+    },
+    fontFamilyTopNum: {
+      type: String,
+      default: 'Oswald-Bold',
+    },
+    fontColorCategory: {
+      type: String,
+      default: '#FFFFFF',
+    },
+    fontSizeCategory: {
+      type: String,
+      default: '12px',
+    },
+    fontFamilyCategory: {
+      type: String,
+      default: 'Poppins-Regular',
+    },
+    opacityColorTopNum: {
+      type: Number,
+      default: 0.09,
+    },
+    borderColorCategory: {
+      type: String,
+      default: '#cbee6b',
+    },
+
+    iconSize: {
+      type: String,
+      default: '18px',
+    },
+    iconPosition: {
+      type: String,
+      default: 'left',
+    },
+    colorArrow: {
+      type: String,
+      default: '#D9D9D9',
+    },
+    buttonWidth: {
+      type: String,
+      default: 'fit-content',
+    },
+    buttonMaxWidth: {
+      type: String,
+      default: '180px',
+    },
+    buttonHeight: {
+      type: String,
+      default: '24px',
+    },
+    buttonRadius: {
+      type: String,
+      default: '30px',
+    },
+    buttonBorderWidth: {
+      type: Number,
+      default: 1,
+    },
+    buttonBackground: {
+      type: String,
+      default: '#ffffff1a',
+    },
+    buttonfontFamily: {
+      type: String,
+      default: 'Poppins-Regular',
+    },
+    buttonBorderColor: {
+      type: String,
+      default: '#cbee6b',
+    },
+    buttonFontSize: {
+      type: String,
+      default: '12px',
+    },
+  },
+  data: () => ({
+    expand: false,
+  }),
+  methods: {
+    viewProfile(data) {
+      this.$emit('play', data)
+    },
+    clickMore(category) {
+      this.$emit('more', category)
+    },
+    clickExpand(id_player) {
+      //      this.expand = !this.expand
+      this.$emit('expand', { expand: !this.isExpanded, id: id_player })
+    },
+    clickFav(data) {
+      this.$emit('fav', data)
+    },
+    clickEventMedia(data) {
+      this.$emit('mediadata', data)
+    },
+  },
+}
+</script>
+
+<style module>
+@import '/css/fonts.css';
+
+body {
+  margin: 0;
+  line-height: normal;
+}
+
+:root {
+  /* fonts */
+  --font-poppins-reports: 'Poppins-Regular';
+  --font-oswald-reports: 'Oswald-SemiBold';
+
+  /* font sizes */
+  --font-size-xs-reports: 12px;
+  --font-size-3xs-reports: 10px;
+  --font-size-81xl-reports: 100px;
+
+  /* Colors */
+  --color-gray-100-reports: rgba(255, 255, 255, 0.08);
+  --color-yellowgreen-reports: #cbee6b;
+  --color-white-reports: #fff;
+
+  --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-reports: 16px;
+  --gap-0-reports: 0px;
+  --gap-9xs-reports: 4px;
+
+  /* Paddings */
+  --padding-3xs-reports: 10px;
+  --padding-5xs-reports: 8px;
+  --padding-xs-reports: 12px;
+  --padding-9xs-reports: 4px;
+  --padding-5xl-reports: 24px;
+
+  /* Border radiuses */
+  --br-5xs-reports: 8px;
+  --br-45xl-reports: 64px;
+}
+
+.tablePositionGamesReports {
+  position: relative;
+  letter-spacing: 1.44px;
+  display: flex;
+  font-size: v-bind(fontSizeTopNum);
+  align-items: flex-end;
+  font-family: v-bind(fontFamilyTopNum);
+  width: 96px;
+  color: v-bind(fontColorTopNum) !important;
+  height: 81px;
+  flex-shrink: 0;
+  opacity: v-bind(opacityColorTopNum);
+  mix-blend-mode: normal;
+  line-height: 90px;
+}
+
+.tablePositionWrapperGamesReports {
+  height: 132px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  z-index: 0;
+}
+
+.imgHenrryIconReports {
+  position: relative;
+  /*      width: 118px; */
+  height: 132px;
+  z-index: 1;
+  margin-left: -14px;
+}
+
+.americaIconReports {
+  position: absolute;
+  margin: 0 !important;
+  bottom: 14px;
+  left: 27px;
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+  display: none;
+  z-index: 2;
+}
+
+.playerPhotoGamesReports {
+  height: 132px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+  position: relative;
+}
+
+.toniKroosGamesReports {
+  flex: 1;
+  color: v-bind(fontColorName);
+  position: relative;
+  font-family: v-bind(fontFamilyName);
+  font-size: v-bind(fontSizeName);
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.shapeIconReports {
+  position: relative;
+  width: 17px;
+  height: 16.46px;
+}
+
+.menuiconsTeamsReports {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.component31Reports {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  padding: var(--padding-3xs-reports);
+  box-sizing: border-box;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.playerNameGamesReports {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.icnPlayIconReports {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.golesReports {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+
+.americaIcon1Reports {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0%;
+  right: 0%;
+  bottom: 0%;
+  left: 0%;
+  max-width: 100%;
+  overflow: hidden;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.teamsAmericaReports {
+  position: relative;
+  width: 28px;
+  height: 28px;
+}
+
+.containerDataReports {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.shapeIcon1Reports {
+  position: relative;
+  width: 12px;
+  height: 6.04px;
+}
+
+.icnExpand1Reports {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--padding-3xs-reports);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+
+.icnExpandReports {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.playerDataGamesReports {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 40px;
+  font-size: var(--font-size-xs-reports);
+  color: var(--color-white-reports);
+}
+
+.playerInfoGamesReports {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: left;
+  font-size: 14px;
+  color: #f4f4f4;
+  font-family: var(--font-poppins-reports);
+  height: inherit;
+}
+
+.headerTopGameReports {
+  align-self: stretch;
+  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-reports) 0px var(--padding-5xs-reports);
+  box-sizing: border-box;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: 20px;
+}
+
+.playerRowReports {
+  align-self: stretch;
+  /*      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
+  height: 88px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 0;
+}
+
+.groupsLeagueReports {
+  position: relative;
+  line-height: 20px;
+  font-weight: 500;
+  font-family: v-bind(fontFamilyCategory);
+  font-size: v-bind(fontSizeCategory);
+  color: v-bind(fontColorCategory);
+}
+
+.textReports {
+  display: flex;
+  flex-direction: row;
+  padding: 0px 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.btnViewFullListReports {
+  margin: 0 !important;
+  position: absolute;
+  top: 13px;
+  right: 8px;
+  border-bottom: 1px solid v-bind(borderColorCategory);
+  display: flex;
+  flex-direction: column;
+  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-reports);
+  font-family: var(--font-poppins-reports);
+}
+
+.headerTopsGamesReports {
+  position: relative;
+  width: 100%;
+  /*      height: 132px; */
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: var(--gap-base-reports);
+  text-align: right;
+  font-size: 100px;
+  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;
+}
+
+@container header-tops (max-width: 1079px) {
+  .playerDataGamesReports {
+    gap: 20px;
+  }
+}
+@container header-tops (max-width: 975px) {
+  .playerDataGamesReports {
+    gap: 0px;
+  }
+}
+@container header-tops (max-width: 480px) {
+  .tablePositionGamesReports {
+    font-size: 95px;
+  }
+
+  .tablePositionWrapperGamesReports {
+    flex: 1;
+    height: 132px;
+    gap: var(--gap-0-reports);
+    padding-top: 9px;
+    box-sizing: border-box;
+  }
+
+  .imgHenrryIconReports {
+    height: 132px;
+  }
+
+  .americaIconReports {
+    display: flex;
+    transform: rotate(0deg);
+    position: relative;
+    bottom: -40px;
+    left: -150px;
+  }
+
+  .playerPhotoGamesReports {
+    height: 132px;
+    gap: var(--gap-0-reports);
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 44px;
+    box-sizing: border-box;
+  }
+
+  .toniKroosGamesReports {
+    font-size: 12px;
+    line-height: 15px;
+    font-family: 'Poppins-Regular', sans-serif;
+    margin-top: 7px;
+  }
+
+  .golesReports {
+    font-size: var(--font-size-3xs-reports);
+  }
+
+  .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;
+  }
+
+  .teamsAmericaReports {
+    display: none;
+  }
+
+  .headerTopGameReports {
+    gap: var(--gap-0-reports);
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .playerRowReports {
+    gap: -10px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .groupsLeagueReports {
+    font-size: var(--font-size-3xs-reports);
+  }
+}
+
+@container header-tops (max-width: 380px) {
+  .tablePositionGamesReports {
+    font-size: 90px;
+    letter-spacing: 1px;
+    text-align: left;
+    position: relative;
+    left: -9px;
+    bottom: -9px;
+  }
+
+  .tablePositionWrapperGamesReports {
+    height: 114px;
+    gap: var(--gap-0-reports);
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-left: var(--padding-5xs-reports);
+    padding-top: 36px;
+    box-sizing: border-box;
+    max-height: 120px;
+  }
+
+  .imgHenrryIconReports {
+    width: 102px;
+    height: 114px;
+    max-height: 110px;
+    position: relative;
+    left: -10px;
+    bottom: -6px;
+  }
+
+  .americaIconReports {
+    display: none;
+    align-self: center;
+    align-items: center;
+  }
+
+  .playerPhotoGamesReports {
+    width: auto;
+    align-self: unset;
+    gap: -20px;
+    align-items: center;
+    justify-content: flex-end;
+    padding-left: var(--padding-5xs-reports);
+    box-sizing: border-box;
+    min-width: 80px;
+    max-width: 160px;
+  }
+
+  .toniKroosGamesReports {
+    font-size: var(--font-size-3xs-reports);
+    min-width: 120px;
+    max-width: 200px;
+  }
+
+  .playerNameGamesReports {
+    gap: var(--gap-9xs-reports);
+  }
+
+  .golesReports {
+    font-size: 6px;
+  }
+
+  .btnVideosOptionsReports {
+    width: auto;
+    align-self: unset;
+    padding-left: var(--padding-9xs-reports);
+    padding-right: var(--padding-9xs-reports);
+    box-sizing: border-box;
+    min-width: 72px;
+  }
+
+  .teamsAmericaReports {
+    display: flex;
+    position: absolute;
+    left: 28px;
+  }
+
+  .playerDataGamesReports {
+    gap: var(--gap-9xs-reports);
+  }
+
+  .playerInfoGamesReports {
+    gap: 9px;
+  }
+
+  .headerTopGameReports {
+    height: 80px;
+    gap: var(--gap-0-reports);
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .playerRowReports {
+    height: 80px;
+  }
+
+  .groupsLeagueReports {
+    font-size: var(--font-size-3xs-reports);
+  }
+
+  .btnViewFullListReports {
+    position: absolute;
+    top: 4px;
+  }
+
+  .headerTopsGamesReports {
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+}
+
+@container header-tops (max-width: 350px) {
+  .americaIconReports {
+    display: none;
+  }
+
+  .golesReports {
+    flex: 1;
+  }
+
+  .btnVideosOptionsReports {
+    min-width: 60px;
+  }
+
+  .teamsAmericaReports {
+    display: flex;
+    position: absolute;
+    left: 20px;
+  }
+}
+
+@container header-tops (max-width: 300px) {
+  .headerTopGameReports {
+    position: relative;
+    height: 88px;
+    align-items: flex-end;
+    justify-content: flex-start;
+    padding: 0px 8px 0px 4px;
+    gap: 20px;
+    overflow: visible;
+  }
+
+  .playerPhotoGamesReports {
+    position: relative;
+    height: 132px;
+    padding-bottom: 8px !important;
+    justify-content: flex-end;
+    align-items: flex-end;
+    z-index: 1;
+  }
+
+  #container-player-info {
+    position: absolute !important;
+    right: 8px !important;
+    z-index: 10 !important;
+    width: auto !important;
+    gap: 4px !important;
+    align-items: flex-end !important;
+    justify-content: flex-end !important;
+    border-radius: 6px !important;
+    backdrop-filter: blur(2px) !important;
+  }
+
+  .playerInfoGamesReports {
+    position: absolute !important;
+    right: 8px !important;
+    top: -12px !important;
+    z-index: 10 !important;
+    width: auto !important;
+    gap: 4px !important;
+    align-items: flex-end !important;
+    justify-content: flex-end !important;
+    border-radius: 6px !important;
+  }
+
+  .playerNameGamesReports {
+    width: auto;
+    text-align: right;
+    justify-content: flex-end;
+    margin-bottom: 0;
+    z-index: 11;
+  }
+
+  .toniKroosGamesReports {
+    font-size: 9px;
+    line-height: 11px;
+    text-align: right;
+    max-width: 100px;
+    margin: 0;
+    font-weight: 600;
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  }
+
+  .playerDataGamesReports {
+    width: auto;
+    justify-content: flex-end;
+    gap: 6px;
+    flex-wrap: nowrap;
+    z-index: 11;
+  }
+
+  .containerDataReports {
+    justify-content: flex-end;
+    gap: 6px;
+    flex-wrap: nowrap;
+    z-index: 11;
+  }
+
+  .containerDataReports :deep(.gsc-button) {
+    z-index: 12;
+    position: relative;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+
+  .tablePositionWrapperGamesReports {
+    position: relative;
+    z-index: 0;
+    height: 132px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-bottom: 0;
+  }
+
+  .tablePositionGamesReports {
+    font-size: v-bind(fontSizeTopNum);
+    line-height: 90px;
+    opacity: v-bind(opacityColorTopNum);
+    color: v-bind(fontColorTopNum);
+    width: 96px;
+    height: 81px;
+    margin-bottom: 0;
+  }
+
+  .imgHenrryIconReports {
+    height: 132px;
+    width: auto;
+    margin-left: -14px;
+    position: relative;
+    z-index: 1;
+    display: block;
+    margin-bottom: 0;
+  }
+
+  .americaIconReports {
+    display: none;
+  }
+
+  .americaIcon1Reports {
+    display: none;
+  }
+
+  .teamsAmericaReports {
+    display: none;
+  }
+
+  .tablePositionWrapperGamesReports {
+    position: relative;
+  }
+
+  .teamIconOverlay {
+    position: absolute;
+    top: 92px;
+    left: 28px;
+    width: 28px;
+    height: 28px;
+    z-index: 5;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .playerRowReports {
+    height: 88px;
+    position: relative;
+  }
+
+  .headerTopsGamesReports {
+    height: 88px;
+    position: relative;
+  }
+
+  .icnExpandReports {
+    z-index: 11;
+    position: relative;
+  }
+}
+
+/** 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 */
+/** 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 */
+/** 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 */
+/** 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 */
+/** 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 */
+/** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */ /** holaaaaaaaaaaaaaa numerto 1 */
+.positionReports {
+  align-self: stretch;
+  position: relative;
+  letter-spacing: 0.31px;
+  line-height: 30.87px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 95px;
+  flex-shrink: 0;
+  opacity: 0.09;
+}
+.positionWrapperReports {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 20px 0px 0px;
+}
+.imgNecaxaIconReports {
+  position: relative;
+  width: 93px;
+  height: 93px;
+  object-fit: cover;
+}
+.teamLogoReports {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 0px 14px;
+  margin-left: -24px;
+}
+.teamPhotoReports {
+  height: 107px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.nameReports {
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+  color: #f4f4f4;
+}
+.icnPlayIconType1Reports {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.verVideosType1Reports {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+.btnVideosOptionsType1Reports {
+  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);
+}
+.btnVideosOptions1GamesReports {
+  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: none;
+  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);
+}
+.leftContainerReports {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+.shapeIconType1Reports {
+  position: relative;
+  width: 12px;
+  height: 6.04px;
+}
+.icnExpandType1Reports {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.arrowExpandReports {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.containerInfoGamesReports {
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sizes-spacing-space-40-reports);
+  text-align: left;
+  font-size: var(--font-size-xs-reports);
+  font-family: var(--font-poppins-reports);
+}
+.headerTopTeamReports {
+  align-self: stretch;
+  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;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 0px 12px;
+  box-sizing: border-box;
+  gap: 25px;
+}
+.containerHeaderReports {
+  align-self: stretch;
+  height: 88px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  z-index: 0;
+}
+.goles1Reports {
+  font-weight: 500;
+}
+.golesType1Reports {
+  position: relative;
+  letter-spacing: 0.31px;
+  line-height: 30.87px;
+}
+.golesWrapperReports {
+  height: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 16px;
+  box-sizing: border-box;
+}
+.btnViewAllReports {
+  margin: 0 !important;
+  position: absolute;
+  top: 13px;
+  right: 8px;
+  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-reports);
+  z-index: 1;
+  font-size: var(--font-size-xs-reports);
+  font-family: var(--font-poppins-reports);
+}
+.headerTopsTeamsReports {
+  position: relative;
+  width: 100%;
+  /*      height: 132px; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 20px;
+  text-align: center;
+  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;
+}
+
+@container header-tops-teams (max-width: 960px) {
+  .headerTopTeamReports {
+    padding: 0px 4px 0px 0px;
+    gap: 0px;
+  }
+  .teamPhotoReports {
+    min-width: 170px;
+  }
+
+  .containerInfoGamesReports {
+    gap: 0px;
+  }
+}
+
+@container header-tops-teams (max-width: 1232px) {
+  .headerTopsTeamsReports {
+    width: auto;
+    align-self: unset;
+  }
+}
+@container header-tops-teams (max-width: 420px) {
+  .positionReports {
+    font-size: var(--font-size-81xl-reports);
+  }
+
+  .imgNecaxaIconReports {
+    width: 93px;
+    height: 93px;
+  }
+
+  .teamLogoReports {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .leftContainerReports {
+    gap: 8px;
+  }
+
+  .containerInfoGamesReports {
+    gap: 0px;
+  }
+
+  .headerTopTeamReports {
+    padding-left: 0px;
+    box-sizing: border-box;
+  }
+}
+@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;
+  }
+}
+
+@container header-tops-teams (max-width: 330px) {
+  .leftContainerReports :deep(.gsc-button) {
+    height: 20px !important;
+    font-size: 10px !important;
+    padding: 2px 8px !important;
+    min-width: 60px !important;
+    max-width: 120px !important;
+  }
+}
+
+@container header-tops (max-width: 320px) {
+  .btnVideosOptionsType1Reports {
+    display: flex;
+  }
+
+  .btnVideosOptions1GamesReports {
+    display: none;
+  }
+
+  .toniKroosGamesReports {
+    font-size: 10px;
+    line-height: 12px;
+    word-wrap: break-word;
+    white-space: normal;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    max-width: 100px;
+    min-height: 24px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .playerNameGamesReports {
+    min-height: 30px;
+    align-items: flex-start;
+  }
+}
+@container header-tops-teams (max-width: 460px) {
+  .containerInfoGamesReports {
+    gap: 0px;
+  }
+}
+@container header-tops-teams (max-width: 350px) {
+  .positionReports {
+    font-size: 72px;
+  }
+
+  .imgNecaxaIconReports {
+    width: 72px;
+    height: 72px;
+  }
+
+  .teamLogoReports {
+    gap: var(--gap-0-reports);
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 25px;
+    box-sizing: border-box;
+    margin-right: 8px;
+  }
+
+  .teamPhotoReports {
+    gap: 0px;
+    align-items: center;
+    justify-content: center;
+    min-width: auto;
+  }
+
+  .headerTopTeamReports {
+    padding-left: 0px;
+    box-sizing: border-box;
+  }
+
+  .positionWrapperReports {
+    width: 80px;
+  }
+  .positionReports {
+    font-size: 90px;
+    margin-bottom: -5px;
+  }
+}
+
+.arrowExpandIconReports {
+  transition: transform 0.3s ease;
+}
+
+.arrowExpandIconReports:hover {
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.rotateReports {
+  transform: rotate(180deg);
+}
+</style>