.sa-fixture-matchwidget {
  container-name: sa-fixture-match-widget;
  container-type: inline-size;
}

@media (max-width: 960px) {
  .sa-fixture-matchwidget {
    width: 100dvw;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    position: relative;
    right: 50%;
  }
}

@media only screen and (min-width: 961px) {
  .sa-fixture-matchwidget {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0;
  }
}

.sa-fixture-matchwidget_sponsor {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px;
  border-top-left-radius: var(--space-sm, 8px);
  border-top-right-radius: var(--space-sm, 8px);
}

@media (max-width: 960px) {
  .sa-fixture-matchwidget_sponsor {
    border-radius: 0;
  }
}

.sa-fixture-matchwidget_sponsor + .sa-fixture-matchwidget_content {
  border-radius: unset;
}

.sa-fixture-matchwidget_content {
  background-color: var(--color-surface-surface-info, #e7f1fd);
  padding: var(--space-xl, 24px) var(--space-lg, 16px);
  border-radius: var(--space-sm, 8px);
}

@media (max-width: 960px) {
  .sa-fixture-matchwidget_content {
    border-radius: 0;
  }
}

.sa-fixture-matchwidget_fixtureContainer {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 16px);
}

.sa-fixture-matchwidget .sa-fixture {
  box-shadow: var(
    --sport-match-widget-fixture-boxShadow,
    0px 4px 6px -4px #0000001a,
    0px 10px 15px -3px #0000001a
  );
}

.sa-fixture-matchwidget .fixtureChannels {
  gap: var(--space-xs, 4px);
}

@container sa-fixture-match-widget (min-width: 150px) and (max-width: 300px) {
  .sa-fixture-matchwidget .fixtureTeam_teamname {
    width: 148px;
  }
}

.sa-fixture-matchwidget_emptyContainer {
  justify-content: center;
  min-height: 80px;
}

.sa-fixture-matchwidget_widgetTitle {
  font-size: var(--typography-font-size-heading2-sm, 24px);
}

@media only screen and (min-width: 961px) {
  .sa-fixture-matchwidget_widgetTitle {
    font-size: var(--typography-font-size-heading1-sm, 28px);
  }
}

/* --- Fixture component responsive overrides --- */
@media only screen and (min-width: 961px) {
  .sa-fixture-matchwidget .fixtureHeader {
    padding: var(--space-sm, 8px);
    min-height: 58px;
  }

  .sa-fixture-matchwidget .fixtureHeader_text {
    font-size: var(--typography-font-size-heading3-sm, 20px);
    line-height: var(--typography-line-height-heading3-sm, 28px);
  }

  .sa-fixture-matchwidget .fixtureHeaderMatchDetail_match {
    gap: 8px;
  }

  .sa-fixture-matchwidget .fixtureHeaderMatchDetail_match_title {
    font-size: var(--typography-font-size-body1-sm, 16px);
    line-height: var(--typography-line-height-body1-sm, 24px);
  }

  .sa-fixture-matchwidget .fixtureHeaderMatchDetail_match_subtitle {
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--typography-line-height-body2-sm, 20px);
  }

  .sa-fixture-matchwidget .fixtureHeaderMatchDetail_avatar {
    width: 32px;
    height: 32px;
  }

  .sa-fixture-matchwidget .fixtureHeaderMatchDetail_title {
    font-size: var(--typography-font-size-body1-sm, 16px);
    line-height: var(--typography-line-height-body1-sm, 24px);
  }

  .sa-fixture-matchwidget .fixtureHeaderMatchDetail_subtitle {
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--typography-line-height-body2-sm, 20px);
  }

  .sa-fixture-matchwidget .fixtureGroup_header {
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--typography-line-height-body2-sm, 20px);
  }

  .sa-fixture-matchwidget .fixtureContent_details {
    width: 48px;
  }

  .sa-fixture-matchwidget .fixtureContent_teamdata {
    padding: var(--space-lg, 16px) 0 var(--space-lg, 16px) var(--space-sm, 8px);
  }

  .sa-fixture-matchwidget .fixtureTeam_teamname {
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--typography-line-height-body2-sm, 20px);
  }

  .sa-fixture-matchwidget .fixtureTeam_scorebox {
    width: 20px;
    height: 20px;
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--typography-line-height-body2-sm, 20px);
  }

  .sa-fixture-matchwidget .fixtureTeam_scoreindicator {
    width: 8px;
    height: 20px;
  }

  .sa-fixture-matchwidget .fixtureDetail_text {
    font-size: var(--typography-font-size-label3-sm, 12px);
    line-height: var(--typography-line-height-label3-sm, 16px);
  }

  .sa-fixture-matchwidget .topFixtureDetails_title {
    font-size: var(--typography-font-size-body2-sm, 14px);
    line-height: var(--typography-line-height-body2-sm, 20px);
  }

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

.sa-fixture-matchwidget_empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}