@use 'style/fonts';
@use 'style/vars';
@use 'style/mixins' as *;

*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;

  @media (prefers-reduced-motion) {
    transition: none !important;
    animation: none !important;
  }
}

html[animations='off'] {
  &,
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

html {
  height: 100%;

  @include on-small-screen {
    font-size: 0.8rem;
  }

  @media print {
    & {
      font-size: 0.7rem;
    }
  }
}

body {
  background-color: var(--background);
  transition: background-color linear var(--transition-time);

  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);

  height: 100%;

  @media print {
    & {
      height: auto;
    }
  }
}

svg {
  stroke: var(--normal-text-color);
}

p {
  @include main-font();
}

noscript {
  @include square(100%);
  @include center-children();
  @include sub-title-font();
}

.start-button {
  @include image-button(var(--large-icon-size));
  @include absolute-center;
  @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));

  // as a result of the firefox fix, it is required for iOS devices
  transform: translate3d(-50%, -50%, 0.00001px);

  &:hover svg {
    box-shadow: var(--shadow);
  }

  svg {
    border-radius: 10000px;
    @include blurred-background;
    transition: transform var(--transition-time), box-shadow var(--transition-time);
  }

  &.inverted svg {
    fill: var(--accent-color);
  }
}

.figure-container {
  font-size: 0;
  box-shadow: var(--inset-shadow);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  pointer-events: none;
  position: relative;

  * {
    pointer-events: auto;
  }

  .image,
  video,
  iframe {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

video,
iframe {
  // the picture of videos is not always visible on firefox mobile without this
  transform: translate3d(0, 0, 0.00001px);
}

.image,
video,
iframe {
  user-select: none;
}

:focus {
  outline: none;

  &:not(:hover) {
    outline: var(--accent-color) solid 3px;
  }
}

::selection {
  background-color: var(--accent-color);
  color: var(--very-light-text-color);
}