.audio-player {
    --player-button-width: 3em;
    --sound-button-width: 2em;
    --space: .5em;
    width: 15rem;
    height: 3rem;
  }
  
  .icon-container {
    width: 100%;
    height: 100%;
    background-color: #C08B7A;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .audio-icon {
     width: 90%;
     height: 90%;
  }
  
  .controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 10px;
  }
  
  .player-button {
    background-color: transparent;
    border: 0;
    width: var(--player-button-width);
    height: var(--player-button-width);
    cursor: pointer;
    padding: 0;
  }
  
  .timeline {
    -webkit-appearance: none;
    appearance: none;
    width: calc(90% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
    height: .5em;
    background-color: #e5e5e5;
    border-radius: 5px;
    background-size: 0% 100%;
    background-image: linear-gradient(#7BA3D8, #7BA3D8);
    background-repeat: no-repeat;
    margin-right: var(--space);
  }
  
  .timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: #C08B7A;
  }
  
  .timeline::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: #C08B7A;
  }
  
  .timeline::-ms-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: #C08B7A;
  }
  
  .timeline::-webkit-slider-thumb:hover {
    background-color: #3D4A5C;
  }
  
  .timeline:hover::-webkit-slider-thumb {
    opacity: 1;
  }
  
  .timeline::-moz-range-thumb:hover {
    background-color: #3D4A5C;
  }
  
  .timeline:hover::-moz-range-thumb {
    opacity: 1;
  }
  
  .timeline::-ms-thumb:hover {
    background-color: #3D4A5C;
  }
  
  .timeline:hover::-ms-thumb {
    opacity: 1;
  }
  
  .timeline::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  .timeline::-moz-range-track {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  .timeline::-ms-track {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  .sound-button {
    background-color: transparent;
    border: 0;
    width: var(--sound-button-width);
    height: var(--sound-button-width);
    cursor: pointer;
    padding: 0;
  }
  
  .player-button svg.rotating {
    animation: rotate-player-icon 1s linear infinite;
  }
  
  @keyframes rotate-player-icon {
    100% {
      transform: rotate(360deg);
    }
  }