.audio-player{--player-button-width: 3em;--sound-button-width: 2em;--space: .5em;width:100%;height:auto}.icon-container{width:100%;height:100%;background-color:#de5e97;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:0}.controls .player-button{background-color:transparent!important;border:0;width:30px;height:40px;cursor:pointer;padding:0;display:flex;align-items:center}.controls .timeline{-webkit-appearance:none;width:calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));background-color:#ddd;height:6px;border-radius:5px;background-size:0% 100%;background-image:linear-gradient(#1570ef,#1570ef);background-repeat:no-repeat;margin-right:var(--space)}.controls .timeline::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;cursor:pointer;opacity:1;transition:all .1s;background:#fff;border:1.5px solid #DDDDDD;box-shadow:0 2px 4px #28293d0a,0 8px 16px #60617029}.controls .timeline::-moz-range-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;cursor:pointer;opacity:1;transition:all .1s;background:#fff;border:1.5px solid #DDDDDD;box-shadow:0 2px 4px #28293d0a,0 8px 16px #60617029}.controls .timeline::-ms-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;cursor:pointer;opacity:1;transition:all .1s;background:#fff;border:1.5px solid #DDDDDD;box-shadow:0 2px 4px #28293d0a,0 8px 16px #60617029}.controls .timeline::-webkit-slider-thumb:hover{background-color:#fff;border:1.5px solid #DDDDDD}.controls .timeline:hover::-webkit-slider-thumb{opacity:1}.controls .timeline::-moz-range-thumb:hover{background-color:#fff;border:1.5px solid #DDDDDD}.controls .timeline:hover::-moz-range-thumb{opacity:1}.controls .timeline::-ms-thumb:hover{background-color:#fff;border:1.5px solid #DDDDDD}.controls .timeline:hover::-ms-thumb{opacity:1}.controls .timeline::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.controls .timeline::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.controls .timeline::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.controls .sound-button{background-color:transparent!important;border:0;width:var(--sound-button-width);height:var(--sound-button-width);cursor:pointer;padding:0;display:flex;align-items:center}.controls .sound-button svg{fill:#1570ef;width:20px}.controls .player-button svg{fill:#1570ef;width:30px}