:root {
   --ttsp-bg-color: transparent;
   --ttsp-border: 1px solid #ddd;
   --ttsp-padding: 6px 20px 6px 6px;
   --ttsp-border-radius: 30px;
   --ttsp-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --ttsp-font-size: 13px;
   --ttsp-gap: 20px;
   --ttsp-btn-bg-color: #007bff;
   --ttsp-btn-bg-color-hover: #0056b3;
   --ttsp-btn-color: #fff;
   --ttsp-btn-border-radius: 50%;
   --ttsp-btn-size: 36px;
   --ttsp-btn-border: none;
   --ttsp-btn-cursor: pointer;
   --ttsp-wave-border-radius: 12px;
   --ttsp-wave-width: 4px;
   --ttsp-wave-color: #ccc;
   --ttsp-wave-animated-color: #007bff;
   --ttsp-wave-animation-duration: 1s;
   --ttsp-time-gap: 5px;
}

@media (prefers-color-scheme: dark) {
   :root {
      --ttsp-border: 1px solid #444444;
      --ttsp-btn-bg-color: #007bff;
      --ttsp-btn-bg-color-hover: #0056b3;
      --ttsp-wave-color: #ccc;
      --ttsp-wave-animated-color: #1e90ff;
      --ttsp-wave-color: #444444;
   }
}

.ttsp {
   align-items: center;
   background: var(--ttsp-bg-color);
   border-radius: var(--ttsp-border-radius);
   border: var(--ttsp-border);
   display: inline-flex;
   gap: var(--ttsp-gap);
   padding: var(--ttsp-padding);
   vertical-align: top;

}

.ttsp-btn {
   align-items: center;
   background: var(--ttsp-btn-bg-color);
   border-radius: var(--ttsp-btn-border-radius);
   border: var(--ttsp-btn-border);
   box-shadow: none;
   cursor: var(--ttsp-btn-cursor);
   display: flex;
   height: var(--ttsp-btn-size);
   justify-content: center;
   padding: 0;
   position: relative;
   transition: background-color 0.3s;
   width: var(--ttsp-btn-size);
}

.ttsp-btn::before {
   border-bottom: 7px solid transparent;
   border-left: 11px solid var(--ttsp-btn-color);
   border-top: 7px solid transparent;
   content: '';
   display: block;
   height: 0;
   width: 0;
}

.ttsp-btn.is-paused::before,
.ttsp-btn.is-paused::after {
   background-color: var(--ttsp-btn-color);
   border: none;
   content: '';
   height: 12px;
   position: absolute;
   width: 3px;
}

.ttsp-btn.is-paused::before {
   left: 13px;
}

.ttsp-btn.is-paused::after {
   right: 13px;
}

.ttsp-btn:hover, .ttsp-btn:focus {
   background: var(--ttsp-btn-bg-color-hover);
}


.ttsp-btn>span {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

.ttsp-wave-container {
   align-items: center;
   display: flex;
   height: 25px;
   justify-content: space-between;
   position: relative;
   width: 40px;
}

.ttsp-wave-bg {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: space-between;
   position: absolute;
   width: 100%;
}

.ttsp-wave-bg div {
   background-color: var(--ttsp-wave-color);
   border-radius: var(--ttsp-wave-border-radius);
   width: var(--ttsp-wave-width);
}

.ttsp-wave-bg div:nth-child(1) {
   height: 10px;
}

.ttsp-wave-bg div:nth-child(2) {
   height: 15px;
}

.ttsp-wave-bg div:nth-child(3) {
   height: 20px;
}

.ttsp-wave-bg div:nth-child(4) {
   height: 25px;
}

.ttsp-wave-bg div:nth-child(5) {
   height: 18px;
}

.ttsp-wave-animated {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: space-between;
   position: absolute;
   width: 100%;
}

.ttsp-wave-animated .ttsp-wave {
   animation: ttspWaveAnimation var(--ttsp-wave-animation-duration) infinite ease-in-out;
   background-color: var(--ttsp-wave-animated-color);
   border-radius: var(--ttsp-wave-border-radius);
   height: 100%;
   opacity: 0;
   width: var(--ttsp-wave-width);
}

.ttsp-wave-animated .ttsp-wave:nth-child(1) {
   animation-delay: 0.2s;
}

.ttsp-wave-animated .ttsp-wave:nth-child(2) {
   animation-delay: 0.4s;
}

.ttsp-wave-animated .ttsp-wave:nth-child(3) {
   animation-delay: 0.6s;
}

.ttsp-wave-animated .ttsp-wave:nth-child(4) {
   animation-delay: 0.8s;
}

.ttsp-wave-animated .ttsp-wave:nth-child(5) {
   animation-delay: 1s;
}

.ttsp-time-container {
   align-items: center;
   display: flex;
   font-family: var(--ttsp-font-family);
   font-size: var(--ttsp-font-size);
   gap: var(--ttsp-time-gap);
}

@keyframes ttspWaveAnimation {

   0%,
   100% {
      transform: scaleY(0.5);
   }

   50% {
      transform: scaleY(1);
   }
}