.octopus-app{
  .arrow-transform {
    transform: rotate(180deg);
  }

  .bloc-paddle{
    align-items: flex-end;
    display: flex;
    width: 1.4rem;
    height: 1.8rem;
    place-content: flex-start space-around;
    border-radius: 50%;
    background: transparent !important;
    
    > span {
        width: 0.2rem;
        margin: 0.05rem;
        background: var(--octopus-background);
    }

    .paddle1 {
      height: 50%;
    }

    .paddle2 {
      height: 25%;
    }

    .paddle3 {
      height: 80%;
    }

    &.play-animation{
      .paddle1 {
          animation-duration: 0.6s;
          animation-name: slidein;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }
      
      .paddle2 {
          animation-duration: 0.3s;
          animation-name: slidein2;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }
      
      .paddle3 {
          animation-duration: 0.5s;
          animation-name: slidein3;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }
    }

    @keyframes slidein {
      0% {
      height: 0;
      }

      100% {
      height: 1rem;
      }
    }
    
    @keyframes slidein2 {
        0% {
        height: 0.3rem;
        }

        100% {
        height: 1.2rem;
        }
    }
    
    @keyframes slidein3 {
        0% {
        height: 1.2rem;
        }

        100% {
        height: 0;
        }
    }
    
  }
}