@golstats/gsc-top-player 1.0.0

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

@@ -0,0 +1,1192 @@
+<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>
+            <img :class="$style.imgHenrryIcon" alt="" :src="data.photo" />
+            <img :class="$style.americaIcon" alt="" :src="data.logo" />
+          </div>
+          <main :class="$style.playerInfoGames" id="container-player-info">
+            <div :class="$style.playerNameGames">
+              <div :class="$style.toniKroosGames">{{ data.name }}</div>
+            </div>
+            <div :class="$style.playerDataGames">
+              <div :class="$style.containerData">
+                <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.teamsAmerica">
+                    <img :class="$style.americaIcon1" 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.teamsAmerica">
+                    <img :class="$style.americaIcon1" alt="" :src="data.logo" />
+                  </div>
+                </template>
+              </div>
+              <div v-if="arrow" :class="$style.icnExpand" @click="clickExpand(data.player_id)">
+                <svg
+                  :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+                  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.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>
+            <div :class="$style.teamLogo">
+              <img :class="$style.imgNecaxaIcon" alt="" :src="data.logo" />
+            </div>
+          </div>
+          <div :class="$style.containerInfoGames">
+            <div :class="$style.leftContainer">
+              <div :class="$style.name">{{ 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.btnVideosOptions1Games">
+                <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.verVideosType1">{{ data.total }}</div>
+              </div>
+            </div>
+            <div v-if="arrow" :class="$style.arrowExpand" @click="clickExpand(data.player_id)">
+              <svg
+                :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+                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',
+    },
+    iconVideos: {
+      type: String,
+      default: 'https://golstatsimages.blob.core.windows.net/images-library/arrow-btn.png',
+    },
+    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: 'Poppins-Regular';
+  --font-oswald: 'Oswald-SemiBold';
+
+  /* font sizes */
+  --font-size-xs: 12px;
+  --font-size-3xs: 10px;
+  --font-size-81xl: 100px;
+
+  /* Colors */
+  --color-gray-100: rgba(255, 255, 255, 0.08);
+  --color-yellowgreen: #cbee6b;
+  --color-white: #fff;
+
+  --sizes-spacing-space-8: 8px;
+  --sizes-spacing-space-4: 4px;
+  --sizes-round-corner-round-corner-8: 8px;
+  --sizes-spacing-space-40: 40px;
+
+  /* Gaps */
+  --gap-base: 16px;
+  --gap-0: 0px;
+  --gap-9xs: 4px;
+
+  /* Paddings */
+  --padding-3xs: 10px;
+  --padding-5xs: 8px;
+  --padding-xs: 12px;
+  --padding-9xs: 4px;
+  --padding-5xl: 24px;
+
+  /* Border radiuses */
+  --br-5xs: 8px;
+  --br-45xl: 64px;
+}
+
+.tablePositionGames {
+  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;
+}
+
+.tablePositionWrapperGames {
+  height: 132px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  z-index: 0;
+}
+
+.imgHenrryIcon {
+  position: relative;
+  /*      width: 118px; */
+  height: 132px;
+  z-index: 1;
+  margin-left: -14px;
+}
+
+.americaIcon {
+  position: absolute;
+  margin: 0 !important;
+  bottom: 14px;
+  left: 27px;
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+  display: none;
+  z-index: 2;
+}
+
+.playerPhotoGames {
+  height: 132px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+  position: relative;
+}
+
+.toniKroosGames {
+  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;
+}
+
+.shapeIcon {
+  position: relative;
+  width: 17px;
+  height: 16.46px;
+}
+
+.menuiconsTeams {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.component31 {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  padding: var(--padding-3xs);
+  box-sizing: border-box;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.playerNameGames {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.icnPlayIcon {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.goles {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+
+.americaIcon1 {
+  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;
+}
+
+.teamsAmerica {
+  position: relative;
+  width: 28px;
+  height: 28px;
+}
+
+.containerData {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.shapeIcon1 {
+  position: relative;
+  width: 12px;
+  height: 6.04px;
+}
+
+.icnExpand1 {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--padding-3xs);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+
+.icnExpand {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.playerDataGames {
+  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);
+}
+
+.playerInfoGames {
+  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);
+  height: inherit;
+}
+
+.headerTopGame {
+  align-self: stretch;
+  border-radius: var(--br-5xs) var(--br-5xs) 0px 0px;
+  background-color: v-bind(backgroundColorHeader);
+  height: 88px;
+  display: flex;
+  flex-direction: row;
+  padding: 0px var(--padding-xs) 0px var(--padding-5xs);
+  box-sizing: border-box;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: 20px;
+}
+
+.playerRow {
+  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;
+}
+
+.groupsLeague {
+  position: relative;
+  line-height: 20px;
+  font-weight: 500;
+  font-family: v-bind(fontFamilyCategory);
+  font-size: v-bind(fontSizeCategory);
+  color: v-bind(fontColorCategory);
+}
+
+.text {
+  display: flex;
+  flex-direction: row;
+  padding: 0px 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.btnViewFullList {
+  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);
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 1;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  font-family: var(--font-poppins);
+}
+
+.headerTopsGames {
+  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);
+  text-align: right;
+  font-size: 100px;
+  color: var(--color-white);
+  font-family: var(--font-oswald);
+  /*      box-shadow: 0px 4px 4px 0px #00000040; */
+}
+
+@media screen and (max-width: 1079px) {
+  .playerDataGames {
+    gap: 20px;
+  }
+}
+@media screen and (max-width: 975px) {
+  .playerDataGames {
+    gap: 0px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .tablePositionGames {
+    font-size: 95px;
+  }
+
+  .tablePositionWrapperGames {
+    flex: 1;
+    height: 132px;
+    gap: var(--gap-0);
+    padding-top: 9px;
+    box-sizing: border-box;
+  }
+
+  .imgHenrryIcon {
+    height: 132px;
+  }
+
+  .americaIcon {
+    display: flex;
+    transform: rotate(0deg);
+    position: relative;
+    bottom: -40px;
+    left: -150px;
+  }
+
+  .playerPhotoGames {
+    height: 132px;
+    gap: var(--gap-0);
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 44px;
+    box-sizing: border-box;
+  }
+
+  .toniKroosGames {
+    font-size: 12px;
+    line-height: 15px;
+    font-family: 'Poppins-Regular', sans-serif;
+    margin-top: 7px;
+  }
+
+  .goles {
+    font-size: var(--font-size-3xs);
+  }
+
+  .btnVideosOptions {
+    align-items: center;
+    justify-content: center;
+    min-width: 64px;
+  }
+
+  .teamsAmerica {
+    display: none;
+  }
+
+  .headerTopGame {
+    gap: var(--gap-0);
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .playerRow {
+    gap: -10px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .groupsLeague {
+    font-size: var(--font-size-3xs);
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .tablePositionGames {
+    font-size: 90px;
+    letter-spacing: 1px;
+    text-align: left;
+    position: relative;
+    left: -9px;
+    bottom: -9px;
+  }
+
+  .tablePositionWrapperGames {
+    height: 114px;
+    gap: var(--gap-0);
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-left: var(--padding-5xs);
+    padding-top: 36px;
+    box-sizing: border-box;
+    max-height: 120px;
+  }
+
+  .imgHenrryIcon {
+    width: 102px;
+    height: 114px;
+    max-height: 110px;
+    position: relative;
+    left: -10px;
+    bottom: -6px;
+  }
+
+  .americaIcon {
+    display: none;
+    align-self: center;
+    align-items: center;
+  }
+
+  .playerPhotoGames {
+    width: auto;
+    align-self: unset;
+    gap: -20px;
+    align-items: center;
+    justify-content: flex-end;
+    padding-left: var(--padding-5xs);
+    box-sizing: border-box;
+    min-width: 80px;
+    max-width: 160px;
+  }
+
+  .toniKroosGames {
+    font-size: var(--font-size-3xs);
+    min-width: 120px;
+    max-width: 200px;
+  }
+
+  .playerNameGames {
+    gap: var(--gap-9xs);
+  }
+
+  .goles {
+    font-size: 6px;
+  }
+
+  .btnVideosOptions {
+    width: auto;
+    align-self: unset;
+    padding-left: var(--padding-9xs);
+    padding-right: var(--padding-9xs);
+    box-sizing: border-box;
+    min-width: 72px;
+  }
+
+  .teamsAmerica {
+    display: flex;
+    position: absolute;
+    left: 28px;
+  }
+
+  .playerDataGames {
+    gap: var(--gap-9xs);
+  }
+
+  .playerInfoGames {
+    gap: 9px;
+  }
+
+  .headerTopGame {
+    height: 80px;
+    gap: var(--gap-0);
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .playerRow {
+    height: 80px;
+    min-width: 320px;
+  }
+
+  .groupsLeague {
+    font-size: var(--font-size-3xs);
+  }
+
+  .btnViewFullList {
+    position: absolute;
+    top: 4px;
+  }
+
+  .headerTopsGames {
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .americaIcon {
+    display: none;
+  }
+
+  .goles {
+    flex: 1;
+  }
+
+  .btnVideosOptions {
+    min-width: 60px;
+  }
+
+  .teamsAmerica {
+    display: flex;
+    position: absolute;
+    left: 20px;
+  }
+}
+
+/** 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 */
+.position {
+  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;
+}
+.positionWrapper {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 20px 0px 0px;
+}
+.imgNecaxaIcon {
+  position: relative;
+  width: 93px;
+  height: 93px;
+  object-fit: cover;
+}
+.teamLogo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 0px 14px;
+  margin-left: -24px;
+}
+.teamPhoto {
+  height: 107px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.name {
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+  color: #f4f4f4;
+}
+.icnPlayIconType1 {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.verVideosType1 {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+.btnVideosOptionsType1 {
+  border-radius: var(--br-45xl);
+  background-color: var(--color-gray-100);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--color-yellowgreen);
+  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);
+}
+.btnVideosOptions1Games {
+  border-radius: var(--br-45xl);
+  background-color: var(--color-gray-100);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--color-yellowgreen);
+  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);
+}
+.leftContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+.shapeIconType1 {
+  position: relative;
+  width: 12px;
+  height: 6.04px;
+}
+.icnExpandType1 {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.arrowExpand {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.containerInfoGames {
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sizes-spacing-space-40);
+  text-align: left;
+  font-size: var(--font-size-xs);
+  font-family: var(--font-poppins);
+}
+.headerTopTeam {
+  align-self: stretch;
+  border-radius: var(--sizes-round-corner-round-corner-8) var(--sizes-round-corner-round-corner-8) 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;
+}
+.containerHeader {
+  align-self: stretch;
+  height: 88px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  z-index: 0;
+}
+.goles1 {
+  font-weight: 500;
+}
+.golesType1 {
+  position: relative;
+  letter-spacing: 0.31px;
+  line-height: 30.87px;
+}
+.golesWrapper {
+  height: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 16px;
+  box-sizing: border-box;
+}
+.btnViewAll {
+  margin: 0 !important;
+  position: absolute;
+  top: 13px;
+  right: 8px;
+  border-bottom: 1px solid var(--color-yellowgreen);
+  box-sizing: border-box;
+  height: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 0px var(--padding-5xs);
+  z-index: 1;
+  font-size: var(--font-size-xs);
+  font-family: var(--font-poppins);
+}
+.headerTopsTeams {
+  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);
+  color: var(--color-white);
+  font-family: var(--font-oswald);
+}
+
+@media screen and (max-width: 960px) {
+  .headerTopTeam {
+    padding: 0px 4px 0px 0px;
+    gap: 0px;
+  }
+  .teamPhoto {
+    min-width: 170px;
+  }
+
+  .containerInfoGames {
+    gap: 0px;
+  }
+}
+
+@media screen and (max-width: 1232px) {
+  .headerTopsTeams {
+    width: auto;
+    align-self: unset;
+  }
+}
+@media screen and (max-width: 420px) {
+  .position {
+    font-size: var(--font-size-81xl);
+  }
+
+  .imgNecaxaIcon {
+    width: 93px;
+    height: 93px;
+  }
+
+  .teamLogo {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .leftContainer {
+    gap: 8px;
+  }
+
+  .containerInfoGames {
+    gap: 0px;
+  }
+
+  .headerTopTeam {
+    padding-left: 0px;
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 320px) {
+  .btnVideosOptionsType1 {
+    display: flex;
+  }
+
+  .btnVideosOptions1Games {
+    display: none;
+  }
+}
+@media screen and (max-width: 460px) {
+  .containerInfoGames {
+    gap: 0px;
+  }
+}
+@media screen and (max-width: 350px) {
+  .position {
+    font-size: 72px;
+  }
+
+  .imgNecaxaIcon {
+    width: 72px;
+    height: 72px;
+  }
+
+  .teamLogo {
+    gap: var(--gap-0);
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 25px;
+    box-sizing: border-box;
+    margin-right: 8px;
+  }
+
+  .teamPhoto {
+    gap: 0px;
+    align-items: center;
+    justify-content: center;
+    min-width: auto;
+  }
+
+  .headerTopTeam {
+    padding-left: 0px;
+    box-sizing: border-box;
+  }
+
+  .positionWrapper {
+    width: 80px;
+  }
+  .position {
+    font-size: 90px;
+    margin-bottom: -5px;
+  }
+}
+
+.arrowExpandIcon:hover {
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.rotate {
+  transform: rotate(180deg);
+}
+</style>