@import '~styles/config';

/***
*  This file is imported in components/app-layout/AppLayout.scss
*/

@-ms-viewport { // stylelint-disable-line
  width: device-width;
}

@-o-viewport { // stylelint-disable-line
  width: device-width;
}

@viewport {
  width: device-width;
}

html, body { // stylelint-disable-line
  min-height: 100vh;
}

html { // stylelint-disable-line
  -webkit-overflow-scrolling: touch;

  overflow-x: hidden;

  // always show the vertical scrollbar so that content doesn't jump
  overflow-y: scroll;

  box-sizing: border-box;
}

// inherited from <html>
*,
*::before,
*::after {
  box-sizing: inherit;
}

body { // stylelint-disable-line
  @include selection($color-primary, #fff);

  position: relative;

  margin: 0;

  overflow-x: hidden;
  // overflow-y: hidden;

  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  // iOS on orientation change
  text-size-adjust: 100%;

  // iOS on orientation change
  text-size-adjust: 100%;

  color: $font-color;
}

html.no-scroll body { // stylelint-disable-line
  height: 100vh;
}

img { // stylelint-disable-line
  display: block;
  max-width: 100%;
  height: auto;
}

// placeholders
input, textarea, select { // stylelint-disable-line
  &::-webkit-input-placeholder { // stylelint-disable-line
    color: $color-placeholder;
  }

  &::-moz-placeholder { // stylelint-disable-line
    opacity: 1;
    color: $color-placeholder;
  }

  &:-ms-input-placeholder { // stylelint-disable-line
    color: $color-placeholder;
  }
}

*::-webkit-media-controls-panel {
  display: none !important;
  appearance: none;
}

*::-webkit-media-controls-play-button {
  display: none !important;
  appearance: none;
}


*::-webkit-media-controls-start-playback-button {
  display: none !important;
  appearance: none;

}