cyb/src/components/MusicalAddress/MusicalAddress.module.scss

.containerSignaturesBtnPlay {
  width: fit-content;
  max-width: 100%;
  background: transparent;
  border: unset;
  // height: 20px;
  font-size: 14px;
  // padding: 100px;
  color: var(--primary-color);
  overflow: hidden;

  &.disabled {
    color: rgba(255, 255, 255, 0.78);
  }

  &:hover:not(.disabled) {
    a {
      color: #00ffbf;
    }
  }

  @media (max-width: 540px) {
    font-size: 12px;
  }
}

.containerSignatures,
.music {
  display: flex;

  align-items: center;
  gap: 3px;
}

.containerSignatures {
  &ItemNote {
    width: 3px;
    border-radius: 2px;
    max-height: 15px;

    @media (max-width: 800px) {
      width: 5px;
    }

    @media (max-width: 540px) {
      width: 2px;
      max-height: 10px;
    }
  }

  @media (max-width: 800px) {
    gap: 2px;
  }

  @media (max-width: 540px) {
    gap: 1px;
    max-width: 100%;
  }
}

.music {
  @media (max-width: 540px) {
    display: none !important;
  }
}

$items: 32;

.containerSignaturesPlaying {
  .containerSignaturesItemNote {
    opacity: 1;
    animation: blink 0.3s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;

    @for $i from 1 through $items {
      &:nth-child(#{$i}) {
        animation-delay: $i * 0.2s;
      }
    }
  }
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
  // 100% {
  //   opacity: 1;
  // }
}