@use "./media.scss" as *;

@include media-query(purple) {
  .content-grid {
    --content-max-width: 100%;
    --padding-inline: 1rem;
  }
  .ad.ad-h {
    display: none;
  }
  .ad.ad-h-s {
    display: grid;
  }

  .pageLogin {
    flex-direction: column;
    gap: 4rem;
    .side {
      width: 100%;
      input[type="email"],
      input[type="password"],
      input[type="text"] {
        width: 100%;
        max-width: 100%;
      }
    }
  }
  .pageTest {
    #liveStatsTextTop,
    #liveStatsTextBottom {
      font-size: 12vw;
    }
    #result .wrapper {
      .stats {
        grid-template-columns: 1fr;
        grid-template-areas: "wpm" "acc";
        width: max-content;
        justify-items: start;
        justify-self: center;
      }
      .morestats {
        justify-self: unset;
        width: unset;

        .group .bottom::after {
          transform: none;
          left: 0;
        }
      }
      .buttons {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: unset;
        #nextTestButton {
          grid-column: span 2;
        }
      }
    }
  }
  .pageAccount {
    .accountVerificatinNotice {
      button {
        grid-column: -1 / 1;
      }
    }
    .group.resultBatches {
      gap: 1rem;
      grid-template-areas: "bar" "button" "text";
      grid-template-columns: 1fr;
    }
    .group.topFilters {
      .buttons {
        grid-template-columns: 1fr;
        button[filter="all"] {
          grid-column: span 1;
        }
      }
    }
    .group.chart .below {
      .buttons {
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
      }
    }
    .triplegroup.stats {
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
    .group.aboveHistory {
      grid-template-columns: 1fr;
      .exportCSV {
        grid-column: span 1;
      }
    }
    .group.history table thead td:nth-child(8),
    .group.history table tbody td:nth-child(8),
    .group.history table thead td:nth-child(9),
    .group.history table tbody td:nth-child(9) {
      display: none;
    }
  }

  #keymap .row {
    height: 1.25rem;
  }
  #keymap .keymapKey,
  #keymap.split_matrix .keymapSplitSpacer {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.3rem;
    font-size: 0.6rem;
  }

  .popupWrapper .modal,
  .modalWrapper .modal {
    padding: 1rem;
  }
  .testActivity {
    .wrapper {
      width: 100%;
      .top {
        grid-template-columns: 8rem 1fr 8rem;
      }
    }
    // .activity {
    //   gap: 0.1em;
    // }
    .activity div,
    .legend div {
      width: 100%;
      height: unset;
      aspect-ratio: 1;
    }
  }
  .popupWrapper .modal .inputs.withLabel,
  .modalWrapper .modal .inputs.withLabel {
    grid-template-columns: 1fr;
  }

  .pageFriends {
    .content .friends table {
      td:nth-child(5),
      td:nth-child(6) {
        display: none;
      }
    }
  }

  .pageAccountSettings [data-tab="blockedUsers"] {
    table {
      font-size: 0.75rem;
    }
  }
}
