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

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

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

html {
  height: 100%;
  -webkit-font-smooth: antialiased;

  > body {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;

    > .canvas-container {
      height: 100%;
      width: 100%;
      display: flex;

      > canvas {
        height: 100%;
        width: 100%;
      }

      > .errors-container {
        color: red;
        position: absolute;
        top: 0;
        left: 0;
        display: none;

        pre {
          font-size: 20px;
        }
      }
    }

    > aside {
      @include blurred-background;

      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      transition: opacity var(--transition-time-long);
      border-radius: var(--border-radius);
      margin: var(--small-margin);

      > nav.buttons {
        @include center-children;
        flex-direction: column;
        gap: var(--normal-margin);
        margin: var(--small-margin);

        > button.info {
          @include image-button(url('../assets/icons/info.svg'));
        }

        > button.maximize-full-screen {
          @include image-button(url('../assets/icons/maximize.svg'));
        }

        > button.minimize-full-screen {
          @include image-button(url('../assets/icons/minimize.svg'));
        }

        > button.restart {
          @include image-button(url('../assets/icons/restart.svg'));
        }
      }

      > main.pages {
        display: none;
      }
    }
  }
}