.audioWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.skeleton {
  animation: pulse 1.2s ease-in-out infinite;

  @mixin light {
    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
    background-size: 400% 400%;
  }

  @mixin dark {
    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
    background-size: 400% 400%;
  }

  @keyframes pulse {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: -135% 0%;
    }
  }
}

.audio {
  display: block;
  width: 100%;
  border-radius: 8px;
}
