.player {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    border: 1px solid #dadada;
    overflow: hidden;
}

.player__inner-wrapper {
    width: 100%;
    overflow: hidden;
}

.player__inner-player {
    transform-origin: top left;
}

.player__controls {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    background-color: #efefef;
}

.player__top-controls {
    display: flex;
}

.player__timeline {
    flex: 1;
    margin: 0px;
    margin-top: 6px;
    margin-bottom: 6px;
    cursor: pointer;

    appearance: none;
    background: linear-gradient(
        to right,
        #11aaa2 0%,
        #11aaa2 var(--progress, 0%),
        #ddd var(--progress, 0%),
        #ddd 100%
    );
    height: 6px;
    border-radius: 999px;
}

/* WebKit (Chrome, Safari, Edge) */

.player__timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background: #11aaa2;
    border-radius: 50%;
    margin-top: -6px; /* centers thumb on track */
}

/* Firefox */

.player__timeline::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background: #11aaa2;
    border-radius: 50%;
    border: none;
}

.player__bottom-controls {
    display: flex;
    justify-content: space-between;
}

.player__control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player__speed {
    padding: 2px;
    cursor: pointer
}

.player__status {
    user-select: none;
}

.player__resize {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
}

.player__resize-icon {
    width: 15px;
}

.player__play {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
}

.player__play-icon {
    width: 15px;
}