:host {
    --dx-c-track-before-color: var(
        --dx-g-audio-track-before-color,
        var(--dx-g-indigo-vibrant-30)
    );
    --dx-c-track-custom-dark-gray: rgba(62 62 62 / 100%);
    --dx-c-track-custom-medium-gray: rgba(195 195 195 / 100%);
    --dx-c-track-custom-light-gray: rgba(235 235 236 / 100%);
    --dx-c-track-thumb-size: 10px;
    --dx-c-track-thumb-color: var(
        --dx-g-audio-track-thumb-color,
        var(--dx-g-indigo-vibrant-30)
    );
    --dx-c-threedot-menu-item-padding: 14px;
    --dx-c-audio-player-padding: 6px 13px 13px;
    --dx-c-audio-background-color: var(--dx-g-audio-background-color, #e0e5f8);
    --dx-c-audio-inner-div-background-color: var(
        --dx-g-audio-inner-div-background-color,
        #fff
    );
}

dx-icon {
    --dx-c-icon-color: var(--dx-g-audio-text-color);
}

/* Outermost container/border */
.custom-audio-player {
    background-color: var(--dx-c-audio-background-color);
    border-radius: 12px;
    padding: var(--dx-c-audio-player-padding);
}

.listen-icon {
    display: inline-block;
    padding: 0 6px 0 4px;
}

.listen-text {
    display: inline-block;
    font-family: var(--dx-g-font-display);
    font-size: var(--dx-g-text-2xs, 11px);
    font-weight: var(--dx-g-font-bold, bold);
    letter-spacing: 0.6px;
    position: relative;
    text-transform: uppercase;
    top: 1px;
    color: var(--dx-g-audio-text-color);
}

/*
   The "inner" container/main part of the player, inside the outer, colored border.
   Current design goal of this element and all other "inner" elements is to closely match native controls as they appear in Chrome
*/
.player {
    --dx-c-popover-border-radius: 0;
    --dx-c-popover-padding: 0;

    align-items: center;
    background-color: var(--dx-c-audio-inner-div-background-color);
    border-radius: 5px;
    display: flex;
    margin-top: 8px;
    padding: 3px 4px;
}

/* Player button controls */
.player dx-button::part(container) {
    height: 24px;
    width: 24px;
}

.player-time,
.player-volume-slider,
.player-seek-slider {
    position: relative;
    top: 1px;
}

.player-time {
    display: inline-block;
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-2xs, 11px);
    margin-left: 4px;
    margin-right: 8px;
    color: var(--dx-g-audio-text-color);
}

/* Sliders and "thumb" controls */
.player-volume-slider,
.player-seek-slider {
    appearance: none;
    border-radius: 16px;
    cursor: pointer;
    height: 4px;
    width: 100%;
}

.player-seek-slider {
    background: var(--dx-c-track-custom-light-gray);
}

/* Create a large, solid "shadow" to the left of the "thumb" on the progress bar, simulating filled in space */
.player-volume-slider::-webkit-slider-thumb,
.player-seek-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--dx-c-track-thumb-color);
    border: none;
    border-radius: 50%;
    height: var(--dx-c-track-thumb-size);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: var(--dx-c-track-thumb-size);
}

.player-volume-slider::-moz-range-thumb,
.player-seek-slider::-moz-range-thumb {
    background-color: var(--dx-c-track-thumb-color);
    border: none;
    border-radius: 50%;
    height: var(--dx-c-track-thumb-size);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: var(--dx-c-track-thumb-size);
}

/* NOTE: Even though the 'active' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
.player-volume-slider:active::-webkit-slider-thumb,
.player-seek-slider:active::-webkit-slider-thumb {
    opacity: 1;
}

.player-volume-slider:active::-moz-range-thumb,
.player-seek-slider:active::-moz-range-thumb {
    opacity: 1;
}

/* Container for the volume slider, which transitions in and out on hover */
.player-volume-container {
    align-items: center;
    border-radius: var(--dx-g-spacing-xs);
    height: 24px;
    display: flex;
    padding-left: 6px;
    position: relative;
    transition: 0.2s ease-out;
    width: 24px;
}

.player-volume-container .player-volume-slider {
    /* HTML5 boilerplate .visuallyhidden equivalent, for hiding an element but leaving it focusable */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.player-volume-container .player-volume-button {
    position: absolute;
    right: 0;
}

.player-threedot-menu {
    background: var(--dx-g-audio-inner-div-background-color);
}

/* Three dot menu, for download and playback speed settings */
.player-threedot-menu ul {
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-2xs, 11px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.player-threedot-menu li {
    cursor: pointer;
    position: relative;
}

/* Speed selection items have a large left padding in Chrome, which we are mimicking */
.player-threedot-menu .player-speed-item {
    padding-left: calc(var(--dx-c-threedot-menu-item-padding) * 3);
}

.player-threedot-menu a {
    color: var(--dx-g-audio-threedot-menu-text-color);
    cursor: pointer;
    display: block;
    padding: var(--dx-c-threedot-menu-item-padding);
    text-decoration: none;
}

.player-threedot-menu dx-icon {
    display: inline-block;
}

.player-threedot-menu dx-icon:not(.player-selected-speed) {
    margin-right: var(--dx-c-threedot-menu-item-padding);
    position: relative;
    top: -1px; /* fix icon vertical position */
}

/* The selected speed has a check mark icon to the right side */
.player-threedot-menu dx-icon.player-selected-speed {
    color: var(--dx-g-indigo-vibrant-40);
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

/*
   All clickable elements inside of the three dot menu are buttons, except for the download link
   dx-button is not used here because these things barely look like buttons
*/
.player-threedot-menu button {
    background: transparent;
    border: 0;
    color: var(--dx-g-audio-threedot-menu-text-color);
    cursor: pointer;
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-2xs, 11px);
    padding: var(--dx-c-threedot-menu-item-padding);
    text-align: left;
    width: 100%;
}

.audio-container {
    display: none;
}

@media (hover: hover) {
    .player dx-button::part(container):hover {
        background: var(--dx-g-audio-button-hover-color);
    }

    /* NOTE: Even though the 'hover' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
    .player-volume-slider:hover::-webkit-slider-thumb,
    .player-seek-slider:hover::-webkit-slider-thumb {
        opacity: 1;
    }

    .player-volume-slider:hover::-moz-range-thumb,
    .player-seek-slider:hover::-moz-range-thumb {
        opacity: 1;
    }

    .player-volume-container.focused-by-keyboard,
    .player-volume-container:hover {
        background: var(--dx-g-audio-button-hover-color);
        width: max(12%, 150px);
    }

    .player-volume-container.focused-by-keyboard .player-volume-slider,
    .player-volume-container:hover .player-volume-slider {
        /* Undo .visuallyhidden */
        clip: unset;
        height: 4px;
        margin-right: 24px; /* leave room for the button */
        overflow: visible;
        position: relative;
        width: 100%;
    }

    .player-threedot-menu a:focus,
    .player-threedot-menu a:hover,
    .player-threedot-menu button:focus,
    .player-threedot-menu button:hover {
        background: var(--dx-g-audio-button-hover-color);
    }
}