@use 'style/vars';
@use 'style/mixins' as *;
@use 'style/animations/animations';
@use 'style/dark-mode/dark-mode';

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

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;
    }
  }
}

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

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

  img,
  video,
  iframe {
    pointer-events: all;
    position: relative;
    z-index: -1;
    width: 100%;
    height: auto;
  }
}

img,
video,
iframe {
  user-select: none;
}

:focus {
  outline: none;

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

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