@use "sass:map";
@use "sass:list";

@use "mixins";
@use "themes";

@each $theme-name, $values in themes.$themes {
  $theme: list.nth($values, 1);
  $theme-light-dark: list.nth($values, 2);

  :root.#{$theme-name} {
    @each $var, $value in $theme {
      --gd-exercise-#{$var}: #{$value};
    }

    @each $var, $values in $theme-light-dark {
      --gd-exercise-#{$var}: #{list.nth($values, 1)};
    }
  }

  :root.#{$theme-name}.dark {
    @each $var, $values in $theme-light-dark {
      --gd-exercise-#{$var}: #{list.nth($values, 2)};
    }
  }
}

$theme: list.nth(themes.$default, 1);
$theme-light-dark: list.nth(themes.$default, 2);
:root {
  @each $var, $value in $theme {
    --gd-exercise-#{$var}: #{$value};
  }

  @each $var, $values in $theme-light-dark {
    --gd-exercise-#{$var}: #{list.nth($values, 1)};
  }
}

:root.dark {
  @each $var, $values in $theme-light-dark {
    --gd-exercise-#{$var}: #{list.nth($values, 2)};
  }
}

:root,
body,
#app,
.gd-splash-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--gd-exercise-app-border-radius);
}

.gd-splash {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: white;
  border-radius: var(--gd-exercise-app-border-radius);

  .gd-splash-error {
    position: absolute;
    width: 50vw;
    height: 30vh;
    top: 10vh;
    left: 25vw;

    display: flex;
    align-items: center;
    justify-content: center;

    color: red;
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
  }

  .gd-splash-image {
    background-image: url("@/assets/svg/gdquest/gdquest-logo-light.svg");
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30%;
    height: 30%;

    animation: alternate;
    animation: gd-splash-pulse 1s ease-in-out 0s infinite alternate both;
  }

  &--dark {
    background-color: #30304a;

    .gd-splash-image {
      background-image: url("@/assets/svg/gdquest/gdquest-logo-dark.svg");
    }
  }
}

@keyframes gd-splash-pulse {
  from {
    transform: scale(0.9);
  }

  to {
    transform: scale(1.1);
  }
}