/* styles.css */

/* Container occupying the full screen */
#loader-screen .container {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 12.5vh;
  grid-template-columns: repeat(auto-fill, 12.5vw);
  overflow: hidden;
}

/* Item styles with responsive grid spans */
#loader-screen .item {
  position: relative;
}

#loader-screen .item.md {
  grid-column: span 2;
  grid-row: span 2;
}

#loader-screen .item.lg {
  grid-column: span 3;
  grid-row: span 3;
}

#loader-screen .item.lg .square,
.item.lg .rectangle {
  transform: scale(0.8);
}

/* Icon styles with CSS variables for dynamic properties */
#loader-screen .icon {
  background-color: var(--icon-color);
  height: 60%;
  left: var(--icon-position-left, 0);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  opacity: var(--opacity, 0);
  position: absolute;
  top: var(--icon-position-top, 0);
  transition: opacity 3s;
  width: 60%;
}

#loader-screen .icon.circle {
  mask-image: url("assets/wonder-circle.svg");
}

#loader-screen .icon.quadrant {
  mask-image: url("assets/wonder-quadrant.svg");
}

#loader-screen .icon.rectangle {
  mask-image: url("assets/wonder-rectangle.svg");
}

#loader-screen .icon.rectangle-rounded {
  mask-image: url("assets/wonder-rectangle-rounded.svg");
}

#loader-screen .icon.square {
  mask-image: url("assets/wonder-square.svg");
}

#loader-screen .icon.square-rotated {
  mask-image: url("assets/wonder-square-rotated.svg");
}

#loader-screen .icon.triangle {
  mask-image: url("assets/wonder-triangle-iso.svg");
}

#loader-screen .icon.triangle-right-angle {
  mask-image: url("assets/wonder-triangle-right-angle.svg");
}

/* Logo container in the center of the screen */
#loader-screen .logo-container {
  align-items: center;
  display: flex;
  justify-content: center;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

#loader-screen .logo {
  height: 20vmin;
}

#loader-screen .logo.light {
  display: none;
}

:root {
  --background-color-light: #fafafa;
  --background-color-dark: #121212;
}
@media (prefers-color-scheme: light) {
  :root {
    --is-light-theme: ;
    --body-background-color: var(--background-color-light);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --is-dark-theme: ;
    --body-background-color: var(--background-color-dark);
  }
}
body {
  background-color: var(--body-background-color);
}
#loader-screen .logo.dark {
  display: var(--is-dark-theme, inline-block) var(--is-light-theme, none);
}
#loader-screen .logo.light {
  display: var(--is-dark-theme, none) var(--is-light-theme, inline-block);
}
body.dark {
  background-color: var(--background-color-dark);
}
body.dark #loader-screen .logo.dark {
  display: none;
}
body.dark #loader-screen .logo.light {
  display: inline-block;
}
body.light {
  background-color: var(--background-color-light);
}
body.light #loader-screen .logo.light {
  display: none;
}
body.light #loader-screen .logo.dark {
  display: inline-block;
}

.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3377e4;
  border-right: 6px solid #3377e4;
  border-left: 6px solid #3377e4;

  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-container {
  height: 100vh;
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: center;
}