@use 'sass:color';

@use '~normalize.css/normalize';
@use '~tippy.js/dist/tippy';
@use '~tippy.js/dist/svg-arrow';
@use 'abstracts' as a;

@use 'chat';
@use 'menus';
@use 'messages';
@use 'components';

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700');

@font-face {
  font-family: 'Among Us';
  src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype');
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  position: relative;
  color: a.$text-color1;
  background: a.$color-chat-bg;
  font-family: a.$chat-chrome-font;
  font-size: 13px;
  line-height: 1.42857143;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern';
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  color: a.$text-color1;
  background: a.$color-chat-bg;
  font-family: a.$chat-chrome-font;
  font-size: 13px;
  line-height: 1.42857143;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern';
  height: 100%;
  margin: 0;
  padding: 0;

  &.pref-fontscale {
    &[data-fontscale='small'] {
      font-size: 14px;
    }

    &[data-fontscale='medium'] {
      font-size: 15px;
    }

    &[data-fontscale='large'] {
      font-size: 16px;
    }
  }
}

textarea,
input,
button {
  font-size: 1em;
  line-height: 1.42857143;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern';
  font-family: inherit;
}

/* Default button style */
button {
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

a {
  color: a.$color-accent;
  text-decoration: none;

  &:hover,
  &:focus {
    color: a.$color-accent-light;
    text-decoration: underline;
  }
}

hr {
  border: 0;
  margin: 1em 0;
  border-top: 1px solid color.adjust(a.$color-surface-dark1, $lightness: -50%);
  border-bottom: 1px solid a.$color-surface-dark3;
}

.tippy-box[data-theme~='dgg'] {
  text-align: center;
  background-color: a.$color-surface-dark4;
  color: a.$color-chat-text1;
}

.tippy-box[data-theme~='dgg'] > .tippy-svg-arrow {
  fill: a.$color-surface-dark4;
}

/* Small screen, non-retina */
@media only screen and (min-width: 320px) {
  body:not(.pref-fontscale) {
    font-size: 13px;
  }
}

/* Small screen, retina, stuff to override above media query */
@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
  only screen and (min-resolution: 192dpi) and (min-width: 320px),
  only screen and (min-resolution: 2dppx) and (min-width: 320px) {
  body:not(.pref-fontscale) {
    font-size: 13px;
  }
}

/* Medium screen, non-retina */
@media only screen and (min-width: 700px) {
  body:not(.pref-fontscale) {
    font-size: 14px;
  }
}

/* Medium screen, retina, stuff to override above media query */
@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
  only screen and (min-resolution: 192dpi) and (min-width: 700px),
  only screen and (min-resolution: 2dppx) and (min-width: 700px) {
  body:not(.pref-fontscale) {
    font-size: 15px;
  }
}

/* Large screen, non-retina */
@media only screen and (min-width: 1300px) {
  body:not(.pref-fontscale) {
    font-size: 16px;
  }
}

/* Large screen, retina, stuff to override above media query */
@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px),
  only screen and (min-resolution: 192dpi) and (min-width: 1300px),
  only screen and (min-resolution: 2dppx) and (min-width: 1300px) {
  body:not(.pref-fontscale) {
    font-size: 16px;
  }
}

$num-size-map: (
  1: 14px,
  2: 15px,
  3: 16px,
  4: 18px,
  5: 20px,
  6: 22px,
  7: 24px,
  8: 26px,
  9: 32px,
  10: 52px,
);

.onstreamchat {
  @each $num, $size in $num-size-map {
    body.pref-fontscale[data-fontscale='#{$num}'] & {
      font-size: $size;
    }
  }
}
