@use "sass:math";
$background-color: var(--fan-color);
$border-color: var(--fan-color);

$fan-width: 220px;

$header-width: $fan-width;
$header-border-width: 10px;

$leaf-border-width: 8px;
$leaf-width: 200px;

$neck-width: 10px;
$neck-height: 60px;

$footer-height: 10px;
$footer-width: 150px;

$circle-width: 10px;
$circle-border-width: 8px;
$circle-position: math.div($leaf-width, 2) -
  (math.div($circle-width, 2) + $circle-border-width);

@keyframes leafsRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1080deg);
  }
}

.fan-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--fan-color);
  border-bottom-width: 0.25rem;
  margin: 0.5rem;
  font-size: 1rem;

  outline: none;

  font-family: monospace;
  font-weight: bold;

  transition: 0.2s;

  &:hover {
    color: var(--fan-bg-color);
    background-color: var(--fan-color);
  }

  &:focus {
    outline: none;
  }

  &.is-active,
  &:active {
    color: var(--fan-bg-color);
    background-color: var(--fan-color);
    transform: translateY(0.32rem);
    border-bottom-width: 1px;
  }
}

#fan {
  width: $fan-width;
  height: $header-width + $neck-height + $footer-height;
  margin: 2rem auto;
  position: relative;
  z-index: 4;
  .fan-header {
    box-sizing: content-box;

    width: $header-width;
    height: $header-width;
    position: absolute;
    left: -$header-border-width;
    top: -$header-border-width;
    border-radius: 50%;
    z-index: 1;
    border: solid $header-border-width $border-color;

    .leafs {
      z-index: 2;
      position: absolute;
      animation: leafsRotate 0s infinite linear;
      transform-origin: center center;
      width: $leaf-width;
      height: $leaf-width;
      top: $header-border-width;
      left: $header-border-width;

      .circle {
        box-sizing: content-box;

        width: $circle-width;
        height: $circle-width;
        border: solid $circle-border-width $border-color;
        border-radius: 50%;
        position: absolute;
        left: $circle-position;
        top: $circle-position;
      }

      .leaf {
        box-sizing: content-box;

        width: 72px;
        height: 60px;
        border-radius: 20% 50%;
        border: $leaf-border-width solid $border-color;
        position: absolute;
        left: math.div($leaf-width, 2);
        top: math.div($leaf-width, 2);
        transform-origin: 0% 0%;
      }

      .leaf-1 {
        @extend .leaf;
      }
      .leaf-2 {
        @extend .leaf;
        transform: rotate(120deg);
      }
      .leaf-3 {
        @extend .leaf;
        transform: rotate(240deg);
      }
    }

    .leafs-0 {
      @extend .leafs;
      animation-duration: 3s;
      animation-timing-function: ease-out;
      animation-delay: 0s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
    .leafs-1 {
      @extend .leafs;
      animation-duration: 2s;
    }
    .leafs-2 {
      @extend .leafs;
      animation-duration: 1.5s;
    }
    .leafs-3 {
      @extend .leafs;
      animation-duration: 0.8s;
    }
  }

  .fan-neck {
    width: $neck-width;
    height: $neck-height;
    background: $background-color;
    position: absolute;
    top: $header-width + 8px;
    left: math.div($header-width, 2) -
      math.div($neck-width, 2);
    z-index: 2;
  }

  .fan-footer {
    width: $footer-width;
    height: $footer-height;
    border-radius: 5%;
    background: $background-color;
    position: absolute;
    top: $header-width + $neck-height + 8px;
    left: math.div($fan-width, 2) -
      math.div($footer-width, 2);
    z-index: 3;
  }
}
