.azkars-audio-player {
    display: flex;
    align-items: center;
    background: var(--azkars-audio-bg, #f5f5f5);
    padding: 6px 10px;
    border-radius: 10px;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    --azkars-audio-accent: var(--accent, #8abf97);
}

.azkars-audio-play {
    font-size: 2em;
    /* margin-top: 0.08em; */
    /* margin-bottom: -0.08em; */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azkars-audio-accent);
    appearance: none;
    box-shadow: none;
    border-radius: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.azkars-audio-play::before {
    content: "";
    height: 0.9em;
    width: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5452 9.17358L13.545 9.1737L5.35862 13.8347L5.35861 13.8347C5.22755 13.9094 5.0772 13.9503 4.9231 13.953C4.769 13.9556 4.61709 13.9199 4.48311 13.8498L4.483 13.8497C4.35037 13.7807 4.24031 13.6803 4.16382 13.5591C4.08735 13.438 4.04709 13.3004 4.04687 13.1604L4.04688 3.83954C4.0471 3.69959 4.08736 3.56199 4.16382 3.44087C4.24031 3.31971 4.35037 3.21928 4.483 3.15025L4.48311 3.1502C4.61709 3.08005 4.769 3.04436 4.9231 3.04701C5.0772 3.04967 5.22755 3.09057 5.35861 3.16526L5.35862 3.16527L13.545 7.8263L13.5452 7.82642C13.6705 7.89689 13.7737 7.99611 13.845 8.11412C13.9163 8.23211 13.9535 8.36499 13.9531 8.49988L13.9531 8.50012C13.9535 8.63501 13.9163 8.76789 13.845 8.88588C13.7737 9.00389 13.6705 9.10311 13.5452 9.17358Z' fill='%2393BD9A' stroke='%2393BD9A' stroke-width='0.09375'/%3E%3C/svg%3E%0A");
}

.azkars-audio-player.playing .azkars-audio-play::before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 13.4584H7.08333V3.54169H4.25V13.4584ZM9.91667 3.54169V13.4584H12.75V3.54169H9.91667Z' fill='%2393BD9A'/%3E%3C/svg%3E%0A");
}

.azkars-audio-track {
    flex-grow: 1;
    height: 1em;
    margin-left: 0.3em;
    margin-right: 0.8em;
    position: relative;
}

.azkars-audio-track:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0.2em;
    left: 0;
    right: 0;
    background: var(--azkars-audio-track, #ddd);
    border-radius: 999px;
}

.azkars-audio-progress {
    height: 0.2em;
    background: var(--azkars-audio-accent);
    width: 0;
    border-radius: 999px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.azkars-audio-progress::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 0.8em;
    width: 0.8em;
    background-color: var(--azkars-audio-accent);
    transform: translate(50%, -50%);
    border-radius: 999px;
}

.azkars-audio-player.audio-not-started .azkars-audio-progress::after {
    content: none;
}

.azkars-audio-time {
    font-size: 0.6em;
    color: var(--azkars-audio-time, #666);
    line-height: 1;
    display: block;
    margin-top: 0.12em;
    margin-bottom: -0.12em;
}