.ulub-wave-player {
    display: flex;
    align-items: center;

    background: #ffffff;

    border: 1px solid #e9ecef;
    border-radius: 4px;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    user-select: none;

    width: 100%;
    max-width: 750px;

    height: 84px;

    box-sizing: border-box;

    overflow: hidden;
}


/*
 * LEWY BLOK
 */

.player-square-block {
    position: relative;

    width: 84px;
    height: 100%;

    background-color: #f1f5f9;

    border-right: 1px solid #e2e8f0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    box-sizing: border-box;
}


/*
 * PLAY
 */

.wave-play-btn {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 4px 10px
        rgba(52, 152, 219, 0.3);

    transition:
        transform 0.15s ease,
        filter 0.15s ease;

    margin-top: -8px;

    background-image:
        url(https://ulubmp3.eu/audioplayers/bgplay_n.webp);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.wave-play-btn:hover {
    transform: scale(1.05);

    filter: brightness(1.08);
}


.wave-play-btn:active {
    transform: scale(0.97);
}


/*
 * IKONA
 */

.wave-icon {
    font-size: 18px;

    color: #ffffff;

    line-height: 1;

    transition:
        transform 0.2s ease;
}


.ulub-wave-player.paused
.wave-icon {
    margin-left: 2px;
}


.ulub-wave-player:not(.paused)
.wave-icon {
    margin-left: 0;
}


/*
 * CZAS
 */

.wave-time-display {
    position: absolute;

    bottom: 3px;

    font-size: 10px;

    color: #64748b;

    font-variant-numeric:
        tabular-nums;

    font-weight: 600;

    white-space: nowrap;

    padding: 1px 5px;

    border-radius: 3px;
}


/*
 * PRAWA STRONA
 */

.wave-timeline-container {
    display: flex;

    flex-grow: 1;

    align-items: center;

    height: 100%;

    min-width: 0;
}


/*
 * WAVE WRAPPER
 */

.wave-display-wrapper {
    position: relative;

    height: 65px;

    width: 100%;

    overflow: hidden;
}


/*
 * SZARA WAVE
 */

.wave-bg {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #cbd5e1;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-position: left center;
    mask-position: left center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/*
 * NIEBIESKA WAVE
 */

.wave-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #3498db;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-position: left center;
    mask-position: left center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    pointer-events: none;

    clip-path:
        inset(0 100% 0 0);

    transition:
        clip-path 0.1s linear;
}


/*
 * SEEK
 */

.wave-slider {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-appearance: none;
    appearance: none;

    background: transparent;

    margin: 0;

    cursor: pointer;

    outline: none;
}


.wave-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 2px;
    height: 42px;

    background:
        rgba(52, 152, 219, 0.4);
}


.wave-slider::-moz-range-thumb {
    width: 2px;
    height: 42px;

    border: none;

    background:
        rgba(52, 152, 219, 0.4);
}


/*
 * MOBILE
 */

@media (max-width: 500px) {

    .ulub-wave-player {
        height: 76px;
    }

    .player-square-block {
        width: 76px;
    }

    .wave-play-btn {
        width: 46px;
        height: 46px;
    }

    .wave-display-wrapper {
        height: 58px;
    }
}