@import '_variables.scss';
@import '_functions.scss';
@import '_extends.scss';
@import '_mixins.scss';
@import '_fonts.scss';

* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  min-width: $minDeviceWidth;
  color: color('river-bed');
  background-color: #fff;
  font-size: 16px;
  font-family: 'Noto Sans', system;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;

  @media (max-width: $minDeviceWidth) {
    font-size: 14px;
  }
}

/*
 * Default amp-carousel button styles
 * Elements under .ap-o-code-preview are rendered from example code, so we
 * should not style them. This classname is set on documentation.j2.
 */
body > * > :not(.ap-o-code-preview) > * > .amp-carousel-button {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  box-shadow: 0 10px 15px 0 transparentize(color('black'), 0.6);
  transition: 400ms;
  background-color: color('white');
  position: relative;
  box-sizing: border-box;
  margin: 1em;
  border-style: none;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: all;

  &-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E");
  }

  &-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E");
  }

  &:hover {
    cursor: pointer;
    box-shadow: 0 20px 30px 0 transparentize(color('black'), 0.8);
    background-color: color('white');
  }
}

/* Used to jump before an anchor and not beneath it */
:target::before {
  content: '';
  display: block;
  visibility: hidden;
  height: 120px;
  margin-top: -120px;
}

@media (min-width: 1024px) {
  h1:target::before { height: 75px; margin-top: -75px; }
  h2:target::before { height: 81px; margin-top: -81px; }
  h3:target::before { height: 87px; margin-top: -87px; }
  h4:target::before { height: 90px; margin-top: -90px; }
  h5:target::before { height: 93px; margin-top: -93px; }
  h6:target::before { height: 97px; margin-top: -97px; }
}
