$bowl-width: 30px;

.saladbowl {
  position: fixed;
  z-index: $global-zindex-bowl;
  top: 0;
  left: 0;
  width: $bowl-width;
  height: $bowl-width;
  user-select: none;
  cursor: pointer;

  @include isAnimate {
    will-change: transform;
    transition: transform 0.3s ease-out;

    &.enableHover:hover {
      .saladbowl-leaf {
        animation: saladbowl-leaf-shake 0.7s infinite linear;
      }
      .saladbowl-orange {
        transform-origin: 301.8px 187.4px;
        animation: saladbowl-orange-spin 0.7s infinite linear;
      }
      .saladbowl-tomato {
        transform-origin: 297.8px 126.4px;
        animation: saladbowl-tomato-shake 0.7s infinite linear;
      }
    }
  }

  &,
  & > svg {
    // #947 fix Super Dark Mode
    background-color: transparent !important;
  }
}

.saladbowl {
  @include isAnimate(-enter-active) {
    & > svg {
      animation: saladbowl-jelly 1000ms linear;
    }
  }

  @include isAnimate(-exit) {
    opacity: 1;
  }

  @include isAnimate(-exit-active) {
    opacity: 0;
    transition: opacity 0.1s;
  }

  &-exit-done {
    display: none;
  }
}

// prettier-ignore
@keyframes saladbowl-jelly {
      0% { transform: matrix3d(0.500, 0, 0, 0, 0, 0.500, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
   3.40% { transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
   4.70% { transform: matrix3d(0.725, 0, 0, 0, 0, 0.800, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
   6.81% { transform: matrix3d(0.830, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
   9.41% { transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% { transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% { transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% { transform: matrix3d(1.070, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% { transform: matrix3d(1.104, 0, 0, 0, 0, 1.120, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.72% { transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% { transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% { transform: matrix3d(1.075, 0, 0, 0, 0, 0.980, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.93% { transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35.54% { transform: matrix3d(0.990, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.74% { transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.04% { transform: matrix3d(0.980, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% { transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.86% { transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.26% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.28% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1.000, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90.69% { transform: matrix3d(1.000, 0, 0, 0, 0, 1.000, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { transform: matrix3d(1.000, 0, 0, 0, 0, 1.000, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

// prettier-ignore
@keyframes saladbowl-leaf-shake {
    0% { transform: translate( 2px,  1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(1deg); }
   20% { transform: translate(-2px,  0  ) rotate(1deg); }
   30% { transform: translate( 0  ,  2px) rotate(0deg); }
   40% { transform: translate( 1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px,  2px) rotate(1deg); }
   60% { transform: translate(-2px,  1px) rotate(0deg); }
   70% { transform: translate( 2px,  1px) rotate(1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate( 2px,  2px) rotate(0deg); }
  100% { transform: translate( 1px, -2px) rotate(1deg); }
}

// prettier-ignore
@keyframes saladbowl-orange-spin {
  from { transform: rotate(  0deg); }
    to { transform: rotate(360deg); }
}

// prettier-ignore
@keyframes saladbowl-tomato-shake {
    0% { transform: rotate(10deg); }
   30% { transform: rotate( 0deg); }
   60% { transform: rotate(10deg); }
   90% { transform: rotate( 0deg); }
  100% { transform: rotate( 5deg); }
}
