@mixin go-to-button {
  position: absolute;
  padding: 20px 0;
  top: 25%;
  font-size: 4em;
  color: $c-bg-zebra2;

  &:hover {
    color: $c-font-dimmer;
  }
}

body:has(.base-view.setup-view) {
  user-select: none !important;
}

.setup-view {
  max-width: 640px;
  max-height: 800px;

  .main-content {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    scrollbar-width: none;
  }

  .from-position {
    position: relative;

    .resets {
      @extend %flex-center-center;

      padding: 2em;
      gap: 2em;
    }
  }

  .snap-pane {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .go-to-board {
    @include go-to-button;

    right: 20px;
  }

  .go-to-opponent {
    @include go-to-button;

    left: 20px;
  }

  div.player {
    width: min(70%, 28vh);
    aspect-ratio: 1;

    &.drag-over {
      outline: $outline;
      outline-offset: 2px;
    }
  }

  .vs {
    @extend %flex-column;

    align-items: center;
    justify-content: center;
    height: 70%;
  }

  .card label {
    padding: 1px 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #333;
    background-color: #f0f0f0dd;
  }

  .chin {
    @extend %flex-center-center;

    padding: 1em;
    border-radius: 5px;
    border-top: 1px solid $c-border;
    background: $c-bg-zebra2;

    * {
      padding: 6px;
      gap: 0.5em;
    }

    span {
      @extend %flex-center-center;
    }

    input {
      min-height: 32px;
      flex: auto;
    }

    @include mq-is-col1 {
      select {
        height: 32px;
      }
    }

    button {
      icon {
        display: block;
        padding: 0;
        width: 64px;
        height: 64px;
        background-size: 64px 64px;
      }

      &.white icon {
        background-image: url('../images/buttons/play-as-white.svg');
      }

      &.black icon {
        background-image: url('../images/buttons/play-as-black.svg');
      }

      &.random icon {
        background-image: url('../images/buttons/play-as-random.svg');
      }
    }
  }

  .params {
    @extend %flex-column;

    flex: auto;
    gap: 0.5em;
  }

  .actions {
    @extend %flex-center-center;
  }

  @include mq-is-col1 {
    .fen {
      display: none;
    }
  }

  @include mq-phone-landscape {
    flex-flow: row nowrap;

    .fen {
      display: none;
    }

    .main-content {
      width: 56%;
    }

    .from-position {
      gap: 0;

      .resets {
        padding: 4px;

        button {
          padding: 4px;
        }
      }
    }

    .chin {
      padding-top: 3em;
      width: 44%;
    }

    div.player {
      width: 38vh;

      .placard {
        display: none;
      }
    }
  }
}