/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens */

.sports {
  border-radius: var(--border-radius-large);
  padding: var(--space-medium);
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-shadow-level-2);
  height: 100%;
  position: relative;

  @include widget-base-style;

  &:hover,
  &:has(:focus-visible) {
    outline: 1px solid var(--border-color-deemphasized);
    box-shadow: var(--card-box-shadow-hover);
  }

  &.is-followed-highlight {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px; /* stylelint-disable-line declaration-property-value-disallowed-list */
      background: var(--sports-followed-gradient);
      // Cuts a hole in the middle so only the 2px outer ring shows,
      // turning the gradient fill into a gradient border.
      mask:
        linear-gradient(#FFF 0 0) content-box,
        linear-gradient(#FFF 0 0);
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  &.medium-widget {
    .sports-title-wrapper {
      align-items: center;
      margin-block-end: 0;
    }

    .sports-intro-wrapper > .sports-intro-lede {
      margin: 0;
    }

    .sports-intro-title {
      font-size: var(--font-size-root);
    }

    .sports-buttons-wrapper {
      margin-block-start: var(--space-medium);
    }

    .sports-body {
      padding-block-end: 0;
      justify-content: space-between;
    }

    .match-highlight-view {
      align-self: first baseline;
      margin-block-end: auto;
    }
  }

  &.large-widget {
    .sports-intro-wrapper {
      margin-block-start: var(--space-large);
    }

    .sports-buttons-wrapper {
      margin-block-start: var(--space-large);
    }
  }

  &.sports-intro {
    position: relative;
    overflow: hidden;

    .sports-intro-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom center;
      pointer-events: none;
    }

    > .sports-title-wrapper,
    > .sports-body {
      position: relative;
      z-index: 1;
    }
  }

  &.sports-follow-state {
    .sports-title-wrapper {
      padding: var(--space-small);
    }
  }

  &.sports-matches {
    .sports-title-wrapper {
      grid-template-columns: auto 1fr auto;
    }
  }

  &.sports-key-dates {
    .sports-title-wrapper {
      grid-template-columns: auto 1fr auto;

      > h3 {
        font-size: var(--font-size-small);
        margin-block: 0;
        justify-self: start;
        align-self: center;
        margin-inline-start: var(--space-small);
        font-weight: var(--font-weight);
        color: var(--text-color-deemphasized);
      }
    }
  }
}

.sports-title-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-block-end: var(--space-xsmall);

  .sports-intro-title {
    margin-block: 0;
    max-width: 250px;
  }

  .sports-intro-lede {
    margin-block-end: var(--space-small);
  }
}

.sports-context-menu-wrapper {
  grid-column: 3;
  justify-self: end;
  opacity: 0;
  pointer-events: none;
}

.sports:hover,
.sports:has(:focus-visible) {
  .sports-context-menu-wrapper {
    opacity: 1;
    pointer-events: auto;
  }
}

// Handles keyboard focus on moz-button, since :has(:focus-visible) doesn't include shadow DOM
.sports-context-menu-wrapper:focus-within,
.sports-context-menu-wrapper:has(panel-list[open]) {
  opacity: 1;
  pointer-events: auto;
}

.sports-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  overflow-y: auto;
  scrollbar-width: none;
  overflow-x: hidden;
  padding-inline: var(--space-small);
  padding-block: var(--space-xsmall) var(--space-small);
}

.sports-live-scores {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
}

.sports-intro-wrapper {
  text-align: center;
}

.sports-intro-title {
  margin-block: 0;
  font-size: var(--font-size-heading-xlarge);
  font-weight: var(--font-weight-heading);
}

.sports-buttons-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  .sports-view-matches {
    margin-block-end: var(--space-small);
  }

  .sports-follow-teams-btn {
    background: var(--newtab-background-color-secondary);
    border-radius: var(--border-radius-xlarge);
  }
}

.sports-follow-teams {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  flex: 1;
}

.sports-country-search {
  margin-block-end: var(--space-xsmall);
}

.sports-follow-teams-title {
  font-size: var(--font-size-small);
  align-self: center;
}

.sports-follow-teams-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-xsmall);
  gap: var(--space-medium);
  flex: 1;
  overflow-y: auto;
}

.sports-follow-teams-row {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  cursor: pointer;

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;

    moz-checkbox {
      // Lets the row's not-allowed cursor show through; we can't reach the cursor on the input in the shadow DOM from outside.
      pointer-events: none;
    }

    .sports-team-flag,
    .sports-team-name {
      cursor: not-allowed;
    }
  }
}

.sports-team-flag {
  width: 30px;
  height: var(--dimension-20);
  object-fit: cover;
  flex-shrink: 0;
}

.sports-team-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-root);
  color: var(--text-color);
}

.sports-back-button {
  grid-column: 1;
  justify-self: start;

  &:dir(rtl) {
    transform: scaleX(-1);
  }
}

.sports-matches-tabs {
  display: flex;
}

.sports-matches-view {
  height: 100%;
  display: flex;
  align-items: center;
}

.sports-matches-tab-panel {
  width: 100%;
  height: 100%;
}

.sports-matches-view > div > moz-button {
  display: block;
  margin-inline: auto;
}

.sports-matches-list-section > ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}

.sports-matches-list {
  margin-block-start: var(--space-medium);
}

.sports-section-label {
  color: var(--text-color-deemphasized);
  font-size: var(--font-size-small);
}

.sports-matches-list-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

@keyframes sports-section-label-live-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.sports-section-label-live {
  color: var(--text-color-error);
  font-weight: var(--font-weight-heading);
  animation: sports-section-label-live-pulse 1.6s ease-in-out infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.sports-matches-list-section {
  & + & {
    border-block-start: 1px solid var(--border-color-deemphasized);
    padding-block-start: calc(var(--space-large) + var(--space-xsmall));
    margin-block-start: calc(var(--space-large) + var(--space-xsmall));
  }
}

.sports-followed-only-toggle {
  display: block;
  margin-block-end: var(--space-small);
}

// This rule applies to the "Show less" button only when the full list of upcoming games or previous results is shown
.sports-matches-tab-panel:not(:has(.match-highlight-view)) > moz-button {
  margin-block-start: var(--space-medium);
  padding-block-end: var(--space-small);
}

.sports-matches-tab-panel:has(.match-highlight-view) {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.sports-matches-tab-panel:has(.match-highlight-view) > .sports-section-label {
  position: absolute;
  margin-block-start: var(--space-medium);
}

.large-widget
.sports-matches-tab-panel:has(.match-highlight-view)
> .match-highlight-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sports-matches-tab-panel:has(.match-highlight-view) > moz-button {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  width: fit-content;
}

.sports-matches-tab {
  flex: 1;
  padding-block: var(--space-small);
  border: none;
  border-block-end: 2px solid transparent;
  font-size: var(--font-size-small);

  &:focus-visible {
    outline: var(--focus-outline);
  }

  &.is-active {
    font-weight: var(--font-weight-semibold);
    border-block-end-color: var(--color-accent-primary);
  }

  &.is-disabled {
    color: var(--text-color-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }
}

.sports-cancel-button {
  grid-column: 3;
  justify-self: end;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--newtab-primary-action-background);
  font-size: var(--font-size-small);
  text-decoration: underline;
}

.sports-done-button {
  margin-inline-start: auto;
  position: sticky;
  inset-inline-end: 0;
  inset-block-end: var(--space-xxsmall);
}

// Key dates state
.sports-key-dates {
  display: flex;
  flex-direction: column;

  .sports-key-dates-list {
    list-style: none;
    padding-inline-start: var(--space-xsmall);
    margin-block-start: 0;

    .sports-key-dates-item {
      display: flex;
      justify-content: space-between;
      margin-block-end: var(--space-medium);
      font-size: var(--font-size-small);

      &:last-of-type {
        margin-block-end: 0;
      }
    }
  }

  moz-button {
    align-self: center;
  }
}