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

@include media-query(yellow) {
  .content-grid {
    --content-max-width: 1024px;
  }
  .pageSettings {
    .section {
      grid-template-columns: 1.5fr 1fr;
      &.themes .tabContainer .tabContent.customTheme {
        .customThemeInputs .customThemeInput {
          grid-template-columns: 15em 1fr;
        }
      }
    }
  }
  .pageAccountSettings .main {
    gap: 2rem;
    .right .tab .section {
      grid-template-columns: 1fr 1fr;
    }
  }
  .pageAccount {
    .group.chart .below {
      grid-template-columns: auto 250px;
      .buttons {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
  .pageTest {
    #liveStatsTextTop,
    #liveStatsTextBottom {
      font-size: 9rem;
    }
  }
  .testActivity {
    // --box-size: 0.9em;
    // --font-size: 0.9em;
    --gap-size: 0.15em;
    // .days {
    //   font-size: 0.8em;
    // }
    .activity div,
    .legend div {
      height: var(--box-size);
    }
    .days {
      display: grid;
    }
    .daysFull {
      display: none;
    }
  }

  .pageFriends {
    .content .friends table,
    .content .pendingRequests table {
      font-size: 0.9rem;

      .badge .text {
        display: none;
      }
    }
  }
}
