lila/ui/analyse/css/study/relay/_tour.scss

$hover-bg: $m-primary_bg--mix-30;
%tour-margin-horiz {
  margin-left: 2vw;
  margin-right: 2vw;
}

.relay-tour {
  @extend %box-neat-force, %flex-column;

  gap: 3vh;
  background: $c-bg-box;

  &__side {
    @extend %flex-column;

    overflow: hidden;

    &__preload {
      @extend %box-neat;

      flex: 1;
      background: $c-bg-box;
    }

    &__header {
      @extend %flex-center-nowrap, %box-radius-top;
      @include prevent-select;

      position: relative;
      overflow: hidden;
      align-items: stretch;
      flex: 0 0 $player-height;

      button {
        @extend %flex-center-nowrap, %metal;

        outline: none;

        &:hover {
          background: $hover-bg;
        }

        &:hover::before {
          color: $c-font-clear;
          text-shadow: none;
        }
      }
    }

    &__empty {
      @extend %box-neat;

      align-items: center;
      justify-content: center;
      background: $c-bg-box;
      gap: 1em;
      padding: 1.5rem 1em 2rem 1em;
      display: none;
      flex-flow: column;

      &::before {
        font-size: 6em;
        color: $c-font-dimmer;
      }

      strong {
        @extend %break-word;

        font-size: 1.2em;
        color: $c-font-dim;
      }

      @include mq-at-least-col2 {
        display: flex;
      }
    }

    &__name {
      @extend %nowrap-ellipsis;

      flex: 1;
      padding: 1em;
      gap: 0.7em;
      font-weight: bold;

      &:hover {
        background: $hover-bg !important;
      }

      &::before {
        @extend %data-icon;

        content: $licon-LessThan;
        font-size: 1.5em;
        color: $c-font-dim;
      }

      main.has-relay-tour &::before {
        content: $licon-RadioTower;
      }

      main.has-relay-tour & {
        background: $c-bg-zebra;
      }
    }

    &__search {
      border-left: $border !important;
      padding: 0 1.2rem;
    }

    .chat__members {
      flex: 0 0 auto;
      height: unset;
      line-height: 1.3em;
      min-height: 1.3em;
    }

    .streamer-show {
      display: none;
      position: relative;
      padding: 0 1.2rem;
      font-size: 1.5em;
      color: $c-font-dim;

      &.disabled {
        display: none !important;
      }

      &.streaming {
        color: $c-good;
      }

      &.active {
        color: #eee;
        background: $c-primary;
        text-shadow: none;

        &:hover,
        &:hover::before {
          background: $m-primary_font--mix-90;
          color: white;
        }
      }

      &::after {
        transform: translate(-80%, 80%);

        @include if-rtl {
          transform: translate(80%, 80%);
        }

        background-color: $c-brag;
      }
    }

    .streamer-menu-anchor {
      position: relative;
      height: 0;
    }

    .streamer-menu {
      @extend %flex-column, %dropdown-shadow, %box-radius-bottom;

      position: absolute;
      max-height: 12em;
      overflow-y: auto;
      background: $c-bg-zebra;
      z-index: $z-mz-menu-4;
      width: 100%;
      border: $c-primary 2px solid;
    }

    .streamer {
      @extend %flex-center-nowrap;

      padding: 0.7em 1em;
      font-size: 1.1em;
      color: $c-font;

      i {
        margin-inline-start: auto;
        color: $c-font-dimmer;
      }

      &::before {
        font-size: 1.3em;
      }

      &:hover {
        background: $m-primary_bg--mix-30;
        color: $c-font-clearer;
      }
    }
  }

  &__round {
    @extend %box-padding-horiz, %flex-between-nowrap;

    padding-top: 1em;
    padding-bottom: 1em;
    margin: -1em 0;
    background: $m-primary_bg--mix-10;

    strong {
      @extend %roboto;

      font-size: 1.2em;
    }

    &.ongoing {
      background: $m-accent_bg--mix-10;
      color: $c-accent;
    }
  }

  &__header {
    @extend %flex-center-nowrap;

    background: $c-bg-zebra;

    &__image {
      display: none;
      flex: 0 0 38%;

      &.video {
        flex: 0 0 50%;
      }

      line-height: 0;

      > img {
        width: 100%;

        @include broken-img(2 / 1);
      }

      .video-player-close {
        display: none;
      }

      text-align: center;
    }

    &__image-upload {
      margin: 3em auto;
      line-height: 2em;
    }

    @media (min-width: at-least($x-small)) {
      &__image {
        display: block;
      }
    }

    h1 {
      @extend %break-word;
      @include line-clamp(2);
      @include fluid-size('font-size', 14px, 31px);

      color: $c-brag;
    }

    &__content {
      @extend %flex-column, %tour-margin-horiz;

      flex: 1;
      min-width: 0; // somehow this prevents overflow when mselect is large
      gap: 1em;

      @include mq-at-least-col3 {
        gap: calc(var(---box-padding) / 3);
      }

      margin-top: 1em;
      margin-bottom: 1em;
    }

    &__selectors {
      @extend %flex-center;

      gap: 1em;
      position: relative;
    }

    .setting {
      @extend %flex-center-nowrap;

      margin-inline-end: -1em;

      label {
        padding: 0 0.5em;
        cursor: pointer;
        white-space: nowrap;
      }
    }
  }

  &__mselect {
    position: unset;
    flex: auto;

    @include fluid-size('font-size', 12px, 19px);

    white-space: wrap;

    &.mselect__active {
      overflow: visible;
    }

    .fullscreen-mask {
      display: block;
    }

    .mselect__item {
      opacity: unset;
    }

    .mselect__list {
      transform: unset;

      a {
        gap: 1em;
      }
    }
  }

  &__tour-select {
    .mselect__item {
      @extend %flex-between;
    }

    .tour-state {
      &.finished::before {
        color: $c-good;
        font-size: 0.8em;
      }

      &.ongoing::before {
        color: $c-bad;
        font-size: 0.7em;
      }
    }

    a:hover .tour-state::before {
      color: $c-over;
    }
  }

  &__round-select {
    &__name {
      @extend %ellipsis;

      flex: 3 1 100%;
    }

    &__status {
      font-size: 1rem;
      margin-inline-end: 1ch;
      white-space: nowrap;
    }

    &__label {
      .round-state {
        @extend %flex-center-nowrap;

        gap: 1ch;
      }
    }

    .ongoing::before {
      color: $c-bad;
    }

    .finished::before {
      color: $c-good;
    }

    .mselect__list {
      left: unset;
      right: 0;
      overflow-x: auto;
      overflow-y: auto;
      max-height: 50vh;

      @media (max-width: at-most($medium)) {
        position: fixed;
        top: 10vh;
        left: 5vw !important;
        right: 5vw !important;
        min-width: unset;
      }
    }

    a {
      display: flex;
      padding: 0 1em 0 0;
      align-items: center;
      border-left: 3px solid transparent;

      &.current-round {
        background: $c-bg-zebra;
        border-left-color: $c-primary;
      }

      &:hover {
        background: $c-primary;

        *,
        .round-state::before {
          color: $c-over;
        }
      }
    }

    .name {
      @include ellipsis;

      padding: 0.3em 0 0.3em 1em;
      width: 100%;
    }

    .time,
    .status {
      @extend %roboto;

      font-size: 0.9rem;
      color: $c-font-dim;
      margin-left: auto;
    }

    .status {
      &:empty {
        display: none;
      }
    }
  }

  &__note {
    @extend %box-neat, %flex-center-nowrap, %tour-margin-horiz;

    gap: 1.5vw;
    background: $c-bg-zebra;
    padding: 1em 2vw;
    white-space: pre-line;

    &::before {
      @extend %data-icon;

      content: $licon-InfoCircle;
      font-size: 2.5em;
    }

    &.pinned::before {
      content: $licon-RadioTower;
    }

    small {
      color: $c-font-dim;
    }
  }

  &__nav {
    @extend %flex-between, %tour-margin-horiz;

    gap: 1em;

    @include prevent-select;
  }

  &__tabs {
    @extend %flex-center;

    gap: 1em;

    button {
      @extend %box-radius;

      cursor: pointer;
      padding: 0.6em 1.5em;
      border: $border;

      &:hover {
        @extend %box-shadow;
      }

      &.active {
        border: 1px solid $c-brag;
      }
    }
  }

  &__info {
    @extend %box-neat, %flex-between, %tour-margin-horiz;

    gap: 1ch;
    background: $c-bg-zebra;
    padding: 1em 2vw;

    > div {
      @extend %flex-center-nowrap;

      gap: 1ch;
    }

    img {
      height: 1.7em;
      aspect-ratio: 1;
    }
  }

  &__markup {
    @extend %tour-margin-horiz;
    @include rendered-markdown(2em, 50vh);
  }

  &__source {
    @extend %tour-margin-horiz;

    font-style: italic;

    @media (max-width: at-most($x-large)) {
      display: none;
    }

    &:last-child {
      margin-bottom: 3em;
    }
  }

  &__share {
    @extend %tour-margin-horiz;

    padding: 3em 2vw 0 2vw;

    &.toggle-box--toggle-off {
      padding: 0 2vw;
    }
  }

  &__players {
    overflow: auto;
  }

  &__players__table {
    thead {
      background: none;

      th {
        white-space: nowrap;
        border: none;
        text-align: end;
        padding: 0.5rem 1rem 0.5rem 1.5rem;

        &.rank {
          padding-left: 1em;
          width: 0;
        }

        &.player-name {
          text-align: start;
        }

        a {
          @extend %flex-center-nowrap;

          color: $c-font;

          &:hover {
            color: $c-primary;
          }

          .mini-game__flag {
            margin-inline-end: 1em;
            opacity: 0.7;
          }
        }
      }
    }

    td {
      &.rank,
      &.score {
        font-weight: bold;
      }

      & + td:not(.player-intro-td) {
        font-family: monospace;
        text-align: end;
      }
    }

    .rp,
    .rp--same {
      margin-inline-start: 1ch;
      display: inline-block;
      width: 5ch;
    }
  }

  &__standings--disclaimer {
    text-align: center;
    color: $c-font-dim;
  }

  .fide-player,
  &__teams__standings {
    a {
      color: $c-font;

      &:hover {
        color: $c-primary;
      }
    }
  }

  .fide-player {
    &__photo {
      @extend %box-neat;

      aspect-ratio: 1;
      max-width: 300px;
    }

    &__header {
      @extend %tour-margin-horiz;
    }

    &__cards {
      @extend %tour-margin-horiz;

      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 1em;

      @media (min-width: at-least($medium)) {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        font-size: 1.1em;
      }
    }

    &__card {
      @extend %box-neat, %flex-column;

      font-family: monospace;
      align-items: center;
      gap: 0.5em;
      background: $c-bg-zebra;
      padding: 1em 1em;

      &.active span {
        color: $c-brag;
        font-weight: bold;
      }

      em {
        @extend %roboto, %flex-center;

        text-transform: uppercase;
        gap: 0.5ch;
        color: $c-font-dim;
      }

      .performance,
      .diff {
        @extend %flex-center;

        gap: 0.5ch;
      }
    }

    .mini-game__flag {
      width: 1em;
      height: 1em;
    }
  }

  .study__multiboard {
    @media (min-width: at-least($xx-large)) {
      margin: 0 0.5em;
    }
  }

  &__team-summary {
    @extend %flex-column;

    gap: 3vh;

    &__header,
    &__matches__header {
      @extend %tour-margin-horiz;
    }

    &__roster {
      overflow: auto;
    }

    &__header {
      &__stats {
        @extend %tour-margin-horiz;

        tr {
          font-size: 1.1em;

          th {
            width: 1%;
            white-space: nowrap;
          }

          th + td {
            padding-left: 3em;
          }
        }

        border-collapse: separate;
        border-spacing: 0 0.5em;

        td {
          padding-left: 1em;
        }
      }
    }

    .score {
      font-weight: bold;
    }

    &__table {
      th:first-child,
      td.game-link {
        width: 1%;
        white-space: nowrap;
        padding-right: 2em;

        a.game-link {
          @extend %game-link-styles;
        }
      }

      .team-name {
        font-size: 1.1em;
      }

      a {
        color: $c-font;

        &:hover {
          color: $c-primary;
        }
      }
    }
  }

  %game-link-styles {
    @extend %flex-center-nowrap, %box-radius;

    @media (min-width: at-least($medium)) {
      padding: 0.4em 0.5em;
      font-size: 1.6em;
    }

    &:hover {
      background: $m-primary_bg--mix-20;
      color: $c-font-clearer;
    }
  }

  .fide-players-table {
    .game-link {
      @extend %game-link-styles;
    }

    td:has(.game-link) {
      width: 0;
    }

    td:not(.player-intro-td) {
      font-family: monospace;
      text-align: end;

      a {
        @extend %base-font;
      }
    }
  }

  @media (max-width: at-most($medium)) {
    .player-intro__photo {
      display: none;
    }

    .player-intro__name {
      @include ellipsis;
    }
  }
}

.relay-games {
  @extend %flex-column, %box-radius-bottom, %box-shadow;

  background: $c-bg-box;
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 0.9em;
  position: relative;
}

.relay-game {
  @extend %flex-center-nowrap;

  align-items: stretch;
  gap: 0.5em;
  padding: 0.5em 0.7em 0.5em 0.2em;
  height: 50px;
  border-bottom: $border;
  border-left: 3px solid transparent;

  &:hover {
    background: $m-primary_bg--mix-12;
    color: $c-font-clearer;

    .mini-game__flag {
      opacity: 1;
    }

    border-left-color: $c-primary;
  }

  &--current {
    background: $m-primary_bg--mix-20;
    border-left-color: $c-primary;
  }

  &__players {
    @extend %flex-column;

    gap: 0.15em;
    flex: 1;
    overflow: hidden;
  }

  &::before {
    content: attr(data-n);
    font-size: 0.9em;
    font-weight: bold;
    align-self: center;
    width: 1.8ch;
    text-align: end;
    color: $c-font-dimmer;
  }

  &--current::before,
  &:hover::before {
    color: $c-primary;
  }

  &__player {
    @extend %flex-between-nowrap;

    color: $c-font;

    good,
    bad {
      font-weight: bold;
    }

    .mini-game__user .name {
      @extend %nowrap-ellipsis;
    }

    .mini-game__flag {
      width: 1.1em;
    }
  }

  .mini-game__gauge {
    order: 0;

    tick {
      top: 1.5px;
      border-bottom-width: 3px;
    }
  }
}

.relay-tour__stats {
  @extend %flex-column;

  gap: 1em;

  .spinner {
    margin: 10em auto;
  }

  &__unique {
    @extend %tour-margin-horiz;

    background: $c-bg-zebra;
    padding: 1em 2vw;
  }

  canvas {
    min-height: 50vh;
    margin: 0 2em 0 1em;
  }
}