.sa-fixture {
  border-radius: var(--border-radius-md, 8px);
  overflow: hidden;
  border: 1px solid var(--color-neutral-10, #dedee0);
}

.sa-fixture > .fixtureHeader ~ .fixtureGroup > .fixtureGroup_header {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.sa-fixture > .fixtureHeader ~ .fixtureGroup > .fixtureGroup_content {
  border: unset;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

/* fixture header */
.fixtureHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-navy-blue-80, #08205c);
  background-size: cover;
  padding: var(--space-sm, 8px);
  min-height: 58px;
  border-top-left-radius: var(--border-radius-md, 8px);
  border-top-right-radius: var(--border-radius-md, 8px);
}

@media only screen and (min-width: 961px) {
  .fixtureHeader {
    padding: var(--space-sm, 8px) var(--space-xl, 24px);
    min-height: 64px;
  }
}

.fixtureHeader_text {
  height: inherit;
  color: var(--color-neutral-0, #fff);
  font-size: var(--typography-font-size-heading4-lg, 20px);
  font-weight: var(--font-weight-extra-bold, 800);
  line-height: var(--typography-line-height-link1-sm, 24px);
}

@media only screen and (min-width: 961px) {
  .fixtureHeader_text {
    font-size: var(--typography-font-size-heading2-sm, 24px);
    line-height: var(--typography-line-height-heading2-sm, 32px);
  }
}

.fixtureHeaderMatchDetail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.fixtureHeaderMatchDetail_match {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
}

@media only screen and (min-width: 961px) {
  .fixtureHeaderMatchDetail_match {
    gap: var(--space-lg, 16px);
  }
}

.fixtureHeaderMatchDetail_match_avatar {
  width: 32px;
  height: 32px;
}

@media only screen and (min-width: 961px) {
  .fixtureHeaderMatchDetail_match_avatar {
    width: 40px;
    height: 40px;
  }
}

.fixtureHeaderMatchDetail_match_avatarFallback {
  display: none;
  background-color: var(--color-neutral-5);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

@media only screen and (min-width: 961px) {
  .fixtureHeaderMatchDetail_match_avatarFallback {
    width: 40px;
    height: 40px;
  }
}

.fixtureHeaderMatchDetail_match_title {
  font-size: var(--typography-font-size-body1-md, 16px);
  line-height: var(--typography-line-height-link1-sm, 24px);
  font-weight: var(--font-weight-extra-bold, 800);
  color: var(--color-neutral-0, #fff);
}

@media only screen and (min-width: 961px) {
  .fixtureHeaderMatchDetail_match_title {
    font-size: var(--typography-font-size-heading4-sm, 18px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

.fixtureHeaderMatchDetail_match_subtitle {
  color: var(--color-neutral-0, #fff);
  font-size: var(--typography-font-size-body2-sm, 14px);
  line-height: var(--typography-line-height-body2-sm, 20px);
  font-weight: var(--font-weight-regular, 400);
}

@media only screen and (min-width: 961px) {
  .fixtureHeaderMatchDetail_match_subtitle {
    font-size: var(--typography-font-size-body1-md, 16px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

.fixtureHeaderMatchDetail_link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fixtureHeaderMatchDetail_link_icon {
  color: var(--color-neutral-0, #fff);
}

/* fixture group */
.fixtureGroup_header {
  background-color: var(--sport-fixture-group-backgroundColor, #f3e5fe);
  min-height: 36px;
  color: var(--color-neutral-100, #010414);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--typography-font-size-body2-sm, 14px);
  line-height: var(--typography-line-height-body2-sm, 20px);
  border-top-left-radius: var(--border-radius-md, 8px);
  border-top-right-radius: var(--border-radius-md, 8px);
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 961px) {
  .fixtureGroup_header {
    font-size: var(--typography-font-size-body1-md, 16px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

.fixtureGroup_groupLabel {
  padding: var(--space-sm, 8px) var(--space-lg, 16px);
  background-color: var(--color-neutral-10, #dedee0);
  font-size: var(--typography-font-size-body2-sm, 14px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--typography-line-height-body2-sm, 20px);
  text-align: center;
}

.fixtureGroup_content {
  border: 1px solid #f3e5fe;
  border-top: unset;
  overflow: hidden;
  border-bottom-left-radius: var(--border-radius-md, 8px);
  border-bottom-right-radius: var(--border-radius-md, 8px);
}

/* fixture content */
@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animation__blink {
  animation-name: blink;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

/* Fixture Content */

.fixtureContent {
  display: flex;
  align-items: center;
  background: var(--color-neutral-0, #fff);
}

.fixtureContent_details {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 48px;
  border-right: 1px solid var(--color-neutral-10, #dedee0);
  gap: var(--space-sm, 8px);
}

@media only screen and (min-width: 961px) {
  .fixtureContent_details {
    width: 104px;
  }
}

.fixtureContent_teamdata {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  padding: var(--space-lg, 16px) 0 var(--space-lg, 16px) var(--space-sm, 8px);
  flex: 1;
  cursor: pointer;
}

@media only screen and (min-width: 961px) {
  .fixtureContent_teamdata {
    padding: var(--space-lg, 16px) 0 var(--space-lg, 16px) var(--space-lg, 16px);
  }
}

.fixtureContent_teamdata--no-pointer {
  cursor: auto;
}

.fixtureContent--even {
  background: var(--color-neutral-5, #f8f8f9);
}

/* ---- Fixture Team ---- */
.fixtureTeam {
  display: flex;
  justify-content: space-between;
}

.fixtureTeam_teams {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-xs, 2px);
  flex: 1;
}

.fixtureTeam_team {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  flex: 1;
}

.fixtureTeam_teamImgFallback {
  background-color: var(--color-neutral-5);
  width: 24px;
  height: 24px;
}

.fixtureTeam_teamImg {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.fixtureTeam_teamname {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--typography-font-size-body2-sm, 14px);
  line-height: var(--typography-line-height-body2-sm, 20px);
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-neutral-100, #010414);
}

@media screen and (min-width: 200px) and (max-width: 480px) {
  .fixtureTeam_teamname {
    max-width: 180px;
  }
}

@media only screen and (min-width: 961px) {
  .fixtureTeam_teamname {
    font-size: var(--typography-font-size-body1-md, 16px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

.fixtureTeam_teamname--win {
  font-weight: var(--font-weight-bold, 700);
}

.fixtureTeam_teamname--lose {
  color: var(--color-neutral-60, #78787a);
}

.fixtureTeam_score {
  display: flex;
  align-items: center;
}

.fixtureTeam_scorebox {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: var(--typography-font-size-body2-sm, 14px);
  line-height: var(--typography-line-height-body2-sm, 20px);
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-neutral-100, #010414);
}

.fixtureTeam_scorebox--win,
.fixtureTeam_scorebox--roundwin {
  font-weight: var(--font-weight-bold, 700);
}

.fixtureTeam_scorebox--lose,
.fixtureTeam_scorebox--roundlose {
  color: var(--color-neutral-60, #78787a);
}

@media only screen and (min-width: 961px) {
  .fixtureTeam_scorebox {
    width: 24px;
    height: 24px;
    font-size: var(--typography-font-size-body1-md, 16px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

.fixtureTeam_scoreindicator {
  width: 8px;
  height: 20px;
  display: flex;
  align-items: center;
}

.fixtureTeam_scoreindicator--win {
  justify-content: flex-end;
}

.fixtureTeam_scoreindicator--win::after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 4px 6.9px 4px;
  border-color: transparent transparent var(--color-neutral-100, #010414)
    transparent;
  transform: rotate(-90deg);
}

@media only screen and (min-width: 961px) {
  .fixtureTeam_scoreindicator {
    width: 16px;
    height: 24px;
  }
}

/* ---- Fixture Detail ---- */
.fixtureDetail_text {
  font-size: var(--typography-font-size-label3-sm, 12px);
  line-height: var(--line-height-xs, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-neutral-80, #484849);
  text-align: center;
  line-height: var(--line-height-xs, 16px);
}

@media only screen and (min-width: 961px) {
  .fixtureDetail_text {
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--line-height-xs, 16px);
  }
}

.fixtureDetail_text--ongoing {
  color: var(--color-red-60, #e71d10);
}

.fixtureDetail_tag {
  background: var(--color-blue-60, #1473e6);
  color: var(--color-neutral-0, #fff);
  text-transform: uppercase;
  padding: 2px var(--space-xs, 16px);
  white-space: nowrap;
  line-height: var(--line-height-xs, 16px);
  border-radius: var(--border-radius-sm, 4px);
}

.fixtureDetail_tag > .fixtureDetail_text {
  color: var(--color-neutral-0, #fff);
}

.fixtureDetail_tag--fulltime {
  --tag-backgroundColor: var(--color-blue-60, #1473e6);
}

.fixtureDetail_tag--ongoing {
  --tag-backgroundColor: var(--color-red-60, #e71d10);
}

/* ---- Fixture Channels ---- */
.fixtureChannels {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
  justify-content: center;
}

.fixtureChannels_img {
  width: auto;
  height: 20px;
  object-fit: contain;
}

.fixtureChannels_squareimg {
  width: 20px;
  height: 20px;
}

/* ---- Top Fixture Details ---- */
.topFixtureDetails {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm, 8px);
}

.topFixtureDetails_title {
  font-size: var(--typography-font-size-body2-sm, 14px);
  line-height: var(--typography-line-height-body2-sm, 20px);
  font-weight: var(--font-weight-bold, 700);
}

@media only screen and (min-width: 961px) {
  .topFixtureDetails_title {
    font-size: var(--typography-font-size-body1-md, 16px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

.topFixtureDetails_placeholder {
  padding-right: var(--space-sm, 8px);
  font-size: var(--typography-font-size-body2-sm, 14px);
  line-height: var(--typography-line-height-body2-sm, 20px);
  font-weight: var(--font-weight-bold, 700);
}

@media only screen and (min-width: 961px) {
  .topFixtureDetails_placeholder {
    padding-right: var(--space-lg, 16px);
    font-size: var(--typography-font-size-body1-md, 16px);
    line-height: var(--typography-line-height-link1-sm, 24px);
  }
}

/* ---- Scoreboard Mode ---- */
.fixtureContent--scoreboard {
  background: var(--color-navy-blue-80, #08205c);
  border-radius: var(--border-radius-md, 8px);
  flex: 0 0 242px;
}

@media only screen and (min-width: 961px) {
  .fixtureContent--scoreboard {
    flex: 0 0 256px;
  }
}

.fixtureContent--scoreboard .fixtureContent_teamdata {
  padding: var(--space-sm, 8px) 0 var(--space-sm, 8px) var(--space-sm, 8px);
}

@media only screen and (min-width: 961px) {
  .fixtureContent--scoreboard .fixtureContent_teamdata {
    padding: var(--space-lg, 16px) 0 var(--space-lg, 16px) var(--space-lg, 16px);
  }
}

.fixtureContent--scoreboard .topFixtureDetails_title {
  color: var(--color-neutral-0, #fff);
}

.fixtureContent--scoreboard .fixtureTeam_teamname {
  color: var(--color-neutral-0, #fff);
  max-width: 142px;
}

@media only screen and (min-width: 961px) {
  .fixtureContent--scoreboard .fixtureTeam_teamname {
    max-width: 160px;
  }
}

.fixtureContent--scoreboard .fixtureTeam_teamname--win {
  font-weight: var(--font-weight-bold, 700);
}

.fixtureContent--scoreboard .fixtureTeam_teamname--lose {
  color: var(--color-neutral-40, #ababad);
}

.fixtureContent--scoreboard .fixtureTeam_scorebox {
  color: var(--color-neutral-0, #fff);
}

.fixtureContent--scoreboard .fixtureTeam_scorebox--win {
  font-weight: var(--font-weight-bold, 700);
}

.fixtureContent--scoreboard .fixtureTeam_scorebox--lose {
  color: var(--color-neutral-40, #ababad);
}

.fixtureContent--scoreboard .fixtureTeam_scoreindicator--win::after {
  border-color: transparent transparent var(--color-neutral-0, #fff) transparent;
}

.fixtureContent--scoreboard .fixtureDetail_text {
  color: var(--color-neutral-0, #fff);
}