@use "sass:math";

@import '../_variables';
@import '../_mixins';

// Variables
$menu-btn-size: 50px;
$menu-btn-radius: 70px;
$menu-btn-transform-origin: $menu-btn-radius + math.div(0.8 * $menu-btn-size, 2);

// Colors
$menu-btn-primary-color: $brandColor;
$menu-btn-gray: lighten(black, 35%);

// Easings
$bounce: cubic-bezier(0.5, -0.5, 0.5, 1.5);
$bezier: cubic-bezier(0.64, 0.04, 0.35, 1);

// Timings
$delay: 400ms;
$time: 250ms;
$longer-time: $time * 2;


.menu-btn-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: $menu-btn-size;
  height: $menu-btn-size;
  z-index: 40;
}

.menu-btn-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .menu-text {
    color: white;
    font-weight: 400;
    text-align: center;
    line-height: $menu-btn-size;
    font-size: 15px;
  }

  .menu-progress {
    $wider: 6px;

    position: absolute;
    bottom: - math.div($wider, 2);
    right: - math.div($wider, 2);
    width: $menu-btn-size + $wider;
    height: $menu-btn-size + $wider;

    .menu-border {
      stroke: $menu-btn-primary-color;
      opacity: .9;
      stroke-width: 1px;
      fill: none;
      transform-origin: 50% 50%;
      stroke-dasharray: 0% 314.15926%;
      @include transform(rotate(-90deg));
    }
  }
}

.menu-btn,
.menu-btn-child-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
}

.menu-btn {
  @include transition(all $time ease-in-out $delay);
  border-radius: 50%;
  background-color: $menu-btn-primary-color;
  z-index: 5;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background-color: white;
    border-radius: 50%;
    $menu-btn-transition:
      height $time, transform $time $longer-time, margin $time $longer-time,
      background-color $longer-time, border-radius $longer-time;

    @include transition($menu-btn-transition);
    @include transform(translate(-50%, -50%));

    &:first-child {
      margin-left: -10px;
    }
    &:last-child {
      margin-left: 10px;
    }
  }
}

.menu-btn-child-wrapper {
  @include transition(transform 0.3s $bounce $delay);
  z-index: 4;
  width: 80%;
  height: 80%;
}

.menu-btn-child {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background-color: $menu-btn-gray;
  transform-origin: $menu-btn-transform-origin;
  @include transition(all $time $bezier);

  &:nth-child(2), &:nth-child(5) {
    svg {
      @include transform(rotate(-45deg))
    }
  }

  &:nth-child(3), &:nth-child(4) {
    svg {
      @include transform(rotate(-90deg))
    }
  }

  svg {
    opacity: 0;
    visibility: hidden;
  }
}

.menu-btn-container.open {
  .menu-btn span {
    width: 3px;
    $menu-btn-open-transition: margin $time, transform $time, border-radius $time, height $time $longer-time;
    @include transition($menu-btn-open-transition);

    &:first-child,
    &:last-child {
      margin: 0;
      height: 20px;
      border-radius: 5px;
    }
    &:first-child {
      @include transform(translate(-50%, -50%) rotate(45deg));
    }
    &:nth-of-type(2) {
      opacity: 0;
    }
    &:last-child {
      @include transform(translate(-50%, -50%) rotate(-45deg));
    }
  }

  .menu-btn-child-wrapper {
    @include transform(translateX((- $menu-btn-radius)));
    transition-delay: 0s;
  }

  .menu-btn-child {
    transition-delay: $delay;

    svg {
      opacity: 1;
      visibility: visible;
      transition-delay: $delay;
      width: 16px;
      height: auto;
      color: white;
    }

    &:nth-child(2) {
      @include transform(rotate(45deg));
    }

    &:nth-child(3) {
      @include transform(rotate(90deg));
    }

    &:nth-child(4) {
      @include transform(translateY(- ($menu-btn-radius - 0.3 * $menu-btn-size)) rotate(90deg));
    }

    &:nth-child(5) {
      @include transform(translateY(- ($menu-btn-radius - 0.3 * $menu-btn-size)) rotate(45deg));
    }
  }

  .menu-btn-sidebar, .menu-toc-btn {
    display: none;
  }
}

@media (max-width: $MQMobile) {
  .menu-btn-container.open {
    .menu-btn-sidebar,
    .menu-toc-btn {
      display: flex;
    }

    .toggle-sidebar-button {
      outline: none;
    }
  }
}