.dev-view {
  @extend %flex-column;

  gap: 1em;

  span {
    @extend %flex-center-nowrap;

    white-space: nowrap;
    gap: 1em;
  }

  textarea,
  select,
  input {
    padding: 3px 5px;

    &.invalid {
      background-color: $m-bg_bad--mix-80;
    }
  }

  select,
  input:not([type='text']) {
    cursor: pointer;
  }

  *:focus-visible,
  input[type='range']:focus-visible {
    outline: 2px solid $c-font;
    outline-offset: -2px;
  }

  .disabled label > span {
    opacity: 0.5;
  }

  .disabled .hide-disabled {
    display: none;
  }

  .preview-sound::before {
    color: $c-secondary;

    &:hover {
      color: $m-secondary--lighten-11;
    }
  }

  .icon-btn {
    padding: 6px;
  }

  .upper-right {
    position: absolute;
    font-size: 1.25em;
    top: 0;
    right: 0;
    color: $c-bad;
    cursor: pointer;

    &.show {
      display: block;
    }

    &:hover {
      color: $m-bad--lighten-11;
      filter: saturate(1);
    }
  }

  .upper-left {
    position: absolute;
    font-size: 1.25em;
    top: 0;
    left: 0;
    color: $c-primary;
    cursor: pointer;

    &.show {
      display: block;
    }

    &:hover {
      color: $m-primary--lighten-11;
      filter: saturate(1);
    }
  }

  .clean {
    background-color: white;
  }

  .dirty {
    &::after {
      content: '';
      position: absolute;
      right: 4px;
      top: 4px;
      border-radius: 100%;
      border: 5px solid $c-bad;
    }
  }

  .local-only {
    background-color: $m-brag_white--mix-25;
  }

  .local-changes {
    background-color: $m-clas_white--mix-28;
  }

  .upstream-changes {
    background-color: $m-primary_white--mix-30;
  }
}

main.round {
  ---col3-uniboard-side-min: 300px;
}

.dev-side {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content 1fr min-content;
  height: 100%;
  width: 100%;
  flex-flow: column;
  justify-content: stretch;

  input:not([type='text']) {
    cursor: pointer;
  }

  span,
  h3 {
    @extend %flex-between-nowrap;

    gap: 1em;
  }

  label {
    @extend %flex-center-nowrap;

    gap: 0.5em;
  }

  button {
    padding: 0.5em;
  }

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

    position: relative;
    padding-inline-end: 8px;
    border-radius: 5px;
    border: 1px solid $c-border;
    align-content: center;
    width: 100%;
    font-size: 1em;
    gap: 0.5em;

    img {
      width: 10vh;
      height: 10vh;
    }

    &:hover {
      cursor: pointer;
    }

    &[data-color='white'] {
      background-color: #eee;
      color: #333;

      &:hover:not(:has(button:hover)) {
        background-color: hsl(209, 79%, 85%);
      }
    }

    &[data-color='black'] {
      background-color: #333;
      color: white;

      &:hover:not(:has(button:hover)) {
        background-color: hsl(209, 29%, 20%);
      }
    }

    .select-bot {
      width: 60%;
    }

    .stats {
      @extend %flex-column;

      align-items: center;
      flex: auto;

      span {
        @extend %flex-center-nowrap;

        justify-content: center;
        font-size: 1.2em;
        gap: 0.5em;
      }
    }

    .upper-right {
      background: none;
      border: none;
      outline: none;
    }

    .bot-actions {
      @extend %flex-column;

      gap: 1em;
    }
  }

  .spacer {
    flex: 1 1 auto;
  }

  .fen {
    font-family: monospace;
    font-size: 12px;

    &::placeholder {
      color: #888;
    }

    width: 100%;
  }

  .num-games {
    width: 50px;
  }

  .results-action {
    flex: auto;
  }

  .board-action::before {
    color: $c-font;

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

  .reset::before {
    @extend %data-icon;

    content: $licon-X;
    color: $c-bad;

    &:hover {
      color: $m-bad--lighten-11;
    }
  }

  .play-pause {
    margin-inline-start: auto;

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

      color: $c-secondary;
      content: $licon-PlayTriangle;

      &:hover {
        color: $m-secondary--lighten-4;
      }
    }

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

      color: $c-bad;
      content: $licon-Pause;

      &:hover {
        color: $m-bad--lighten-11;
      }
    }
  }
}

.round-robin-dialog {
  @extend %flex-column;

  gap: 1em;

  ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 2px;
  }

  li {
    justify-self: start;
  }

  input[type='checkbox'] {
    margin-inline-end: 0.5em;
  }

  span {
    justify-content: center;
  }
}

.dev-progress {
  position: relative;
  padding: 0.5em;
  width: 100%;
  background: $c-bg-high;

  .results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 2px;
    font-size: 12px;
    font-family: monospace;

    > div {
      justify-self: start;
    }
  }
}

.dev-dashboard {
  @extend %flex-column, %box-radius-bottom;

  z-index: z(mz-menu);
  width: 100%;
  background: $c-bg-high;
  gap: 1em;
  padding: 1.5em 1em;

  > hr {
    margin: 5px;
  }
}

.new-opponent {
  display: none; // file://./../../round/src/view/button.ts
}

@media (max-width: at-most($x-large)) {
  div#main-wrap {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
    width: 100vw;

    > * {
      display: none;
    }

    &::before {
      content: '';
      display: block;
      background-image: url('../data/bot/image/not-worthy.webp');
      background-size: contain;
      background-repeat: no-repeat;
      min-width: 320px;
      min-height: 320px;
    }

    &::after {
      content: '\A Your device is not worthy.';
      font-size: 32px;
      text-align: center;
    }
  }
}

#bot-view {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  max-height: var(---cg-height);

  #bot-content {
    flex: 1 1 auto;
    overflow: auto;
  }
}

.fancy-bot {
  @extend %flex-center;

  img {
    width: 80px;
  }

  span {
    @extend %flex-center-nowrap;

    margin-inline-end: auto;
  }
}

#main-wrap.paused cg-container::after {
  content: 'PAUSED';
  cursor: pointer;
  z-index: 12;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 6em;
  font-weight: 800;
  background-color: $m-dark--fade-40;
  color: $c-paper;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#bot-content .fancy-bot {
  &:nth-child(odd) {
    background: $c-bg-box;
  }

  &:nth-child(even) {
    background: $c-bg-zebra;
  }

  &:hover {
    background: $m-primary_bg--mix-15;
  }

  img {
    width: 96px;
  }

  h2 {
    font-size: 1.4em;
    font-weight: bold;
    color: $c-font-clearer;
  }

  p {
    margin-left: 1em;
  }

  .overview {
    padding: 1em;
    display: flex;
    justify-content: space-around;
    align-self: stretch;
    flex: auto;
    flex-flow: column;
  }
}