@import '../../../styles';

//region Colors
$color-sun: #e4c74d;
$color-cloud-inner: #ffffff;
$color-cloud-outer: #d4d4d2;
$color-parent-outer: #81c0d5;
$color-parent-inner: #c0e6f6;
$color-moon-inner: #fffdf2;
$color-moon-outer: #dee1c5;
$color-stars: #fcfcfc;
// endregion

//region Mixins
@mixin crater($top, $left, $size) {
  content: '';
  position: absolute;
  top: $top;
  left: $left;
  width: $size;
  height: $size;
  background-color: #efeeda;
  border-radius: 100%;
  border: 4px solid $color-moon-outer;
}

@mixin cloudBubble($top, $right, $width, $height, $deg) {
  content: '';
  display: block;
  position: relative;
  top: $top;
  right: $right;
  width: $width;
  height: $height;
  border: 8px solid $color-cloud-outer;
  border-radius: 100%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotateZ($deg);
  background-color: $color-cloud-inner;
}

//endregion

$theme-transition: all 0.3s ease-in-out;

.header {
  position: relative;

  padding: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(black, 0.2);
    display: none;

    &.visible {
      display: block;
      z-index: 1;
    }
  }

  .left_part {
    display: flex;
    flex-direction: row;

    &__logo {
      &--container {
        display: flex;
        flex-direction: row;
        gap: 2rem;
      }

      &--sandkasten {
        width: 4rem;
        height: auto;
        aspect-ratio: 1;
      }
    }
  }

  .right_part,
  .mobile_menu {
    //  Dark mode button
    .wrapper {
      text-align: center;
      display: flex;
      align-items: center;

      .toggle {
        position: relative;
        display: inline-block;
        width: 100px;
        padding: 4px;
        border-radius: 40px;
        scale: 0.75;
      }

      &:before,
      &:after {
        content: '';
        display: table;
      }

      &:after {
        clear: both;
      }

      .toggle-bg {
        position: absolute;
        top: -4px;
        left: -4px;
        width: 100%;
        height: 100%;
        background-color: $color-parent-inner;
        border-radius: 40px;
        border: 4px solid $color-parent-outer;
        transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .toggle-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid red;
        border-radius: 40px;
        z-index: 2;
        opacity: 0;

        &:checked ~ .toggle-switch {
          margin-left: 0;
          border-color: $color-moon-outer;
          background-color: $color-moon-inner;
        }

        &:checked ~ .toggle-bg {
          background-color: #484848;
          border-color: #202020;
        }

        &:checked ~ .toggle-switch .toggle-switch-figure {
          margin-left: 40px;
          opacity: 0;
          transform: scale(0.1);
        }

        &:checked ~ .toggle-switch .toggle-switch-figureAlt {
          transform: scale(1);
        }
      }

      .toggle-switch {
        position: relative;
        width: 30px;
        height: 30px;
        margin-left: 60px;
        background-color: #f5eb42;
        border: 4px solid $color-sun;
        border-radius: 50%;
        transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        .toggle-switch-figure {
          position: absolute;
          bottom: -14px;
          left: -50px;
          display: block;
          width: 80px;
          height: 30px;
          border: 8px solid $color-cloud-outer;
          border-radius: 20px;
          background-color: #fff;
          transform: scale(0.4);
          transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);

          &:after {
            @include cloudBubble(-65px, -42px, 15px, 15px, 70deg);
          }

          &:before {
            @include cloudBubble(-25px, -10px, 30px, 30px, 30deg);
          }
        }

        .toggle-switch-figureAlt {
          @include crater(5px, 2px, 2px);

          box-shadow:
            42px -7px 0 -3px $color-stars,
            75px -10px 0 -3px $color-stars,
            54px 4px 0 -4px $color-stars,
            83px 7px 0 -2px $color-stars,
            63px 18px 0 -4px $color-stars,
            44px 23px 0 -2px $color-stars,
            78px 21px 0 -3px $color-stars;

          transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transform: scale(0);

          &:before {
            @include crater(-6px, 12px, 7px);
          }

          &:after {
            @include crater(10px, 6px, 2px);
          }
        }
      }
    }
  }

  .right_part {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;

    &--menu {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;

      a {
        color: $color-black;
        text-decoration: none;
        white-space: nowrap;

        transition: $theme-transition;
      }
    }

    &--menu_mobile {
      cursor: pointer;
      display: none;
      z-index: 100;
    }

    &--bottom {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      align-items: center;
    }

    &--toggles {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      align-items: center;
    }

    &__lang {
      height: fit-content;
    }

    &__connexion {
      display: flex;
      flex-direction: row;
      gap: 1rem;

      &--login {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        color: $color-purple;
        white-space: nowrap;
      }

      &--register {
        cursor: pointer;
        border: 1px solid $color-black;
        border-radius: 10px;
        padding: 0.75rem 2rem;
        white-space: nowrap;

        transition: border 0.3s ease-in-out;
      }
    }
  }

  .mobile_menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    background: $color-white;
    transform: translateX(100%);
    z-index: 99;

    transition:
      transform 0.3s ease-in-out,
      box-shadow 0.3s ease-in-out,
      background 0.3s ease-in-out;

    &.opened {
      transform: translateX(0);
      box-shadow: $color-black 0 0 5px 0;
    }

    &--wrapper {
      //padding-top: 6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3rem;

      height: 100%;
    }

    &--toggles {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }

    &--menu {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;

      a {
        color: $color-black;
        text-decoration: none;
        white-space: nowrap;

        transition: $theme-transition;
      }
    }

    &__connexion {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  }
}

.dark-theme {
  .right_part {
    &--menu {
      a {
        color: $color-white;
      }
    }

    &__connexion {
      &--register {
        border-color: $color-white;
      }
    }
  }

  .mobile_menu {
    background: $color-light-black;

    &.opened {
      box-shadow: $color-white 0 0 5px 0;
    }

    &--menu {
      a {
        color: $color-white;
      }
    }

    &__connexion {
      &--register {
        border-color: $color-white;
      }
    }
  }
}

@media (max-width: 1024px) {
  .header {
    .right_part {
      flex-direction: column-reverse;

      &--menu_mobile {
        display: flex;
      }

      &--menu {
        display: none;
      }

      &__connexion {
        display: none;
      }

      &--toggles {
        display: none;
      }
    }
  }
}

@media (max-width: 767px) {
  .header {
    .mobile_menu {
      width: 75%;
    }
  }
}
