.bubble-media-button {
    display: flex;
    position: relative;
    height: 36px;
    width: 36px;
    border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
    background-color: var(--bubble-media-player-button-background-color);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.bubble-button-container {
    align-items: center;
    gap: 8px;
  }

.bubble-media-button-icon {
    --mdc-icon-size: 20px;
    color: var(--primary-text-color);
    line-height: normal;
}

.bubble-play-pause-button {
    background-color: var(--bubble-accent-color, var(--bubble-default-color));
}

.bubble-play-pause-button .bubble-media-button-icon {
    color: var(--bubble-media-player-play-pause-icon-color, var(--bubble-button-active-icon-color, var(--primary-background-color, white)));
}

.bubble-play-pause-button:not(.large) {
    height: 36px;
    width: 36px;
}

.bubble-volume-slider {
    position: absolute;
    height: 38px;
    width: var(--bubble-volume-slider-width-calc, var(--volume-slider-width-calc, calc(100% - 150px)));
    left: var(--bubble-volume-slider-left-offset, var(--volume-slider-left-offset, 56px));
    overflow: hidden;
    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
    z-index: 1;
    background-color: var(--bubble-media-player-slider-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
    opacity: 1;
    transition: opacity .2s, transform .2s;
    transform: translateX(0);
}

.bubble-range-value {
    display: flex;
    justify-content: flex-end;
    height: 38px;
    align-items: center;
    font-size: 12px;
    opacity: 0.8;
    z-index: 1;
}

.bubble-mute-button {
    opacity: 1;
    transition: opacity .2s, transform .2s;
    transform: translateX(0);
}

.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateX(14px);
}

.bubble-range-fill {
    background-color: var(--bubble-accent-color, var(--bubble-default-color));
}

.bubble-mute-button {
    display: flex;
    position: absolute;
    height: 38px;
    width: 38px;
    justify-content: center;
    align-items: center;
}

.bubble-media-info-container {
    display: flex;
    line-height: 14px;
    font-size: 12px;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    margin: 0 16px 0 4px;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.bubble-title,
.bubble-artist {
    display: flex;
    margin: 2px 0;
    position: relative;
    white-space: nowrap;
}

.bubble-title {
    font-weight: 600;
}

.bubble-background {
    background-size: cover;
    background-position: center;
    filter: blur(50px);
    opacity: 0.5;
}

@media screen and (max-width: 250px) {
    .bubble-previous-button {
        display: none;
    }
}

@media screen and (max-width: 206px) {
    .bubble-next-button {
        display: none;
    }
}

@media screen and (max-width: 160px) {
    .bubble-volume-button {
        display: none;
    }
}

.large .bubble-mute-button {
  height: 42px;
  width: 42px;
}

.large .bubble-volume-slider {
  height: 42px;
  border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
  left: var(--volume-slider-left-offset, 60px);
  width: var(--volume-slider-width-calc, calc(100% - 164px));
}

.large .bubble-range-value {
  place-items: center;
  height: 42px;
}

.large .bubble-play-pause-button {
  height: 42px;
  width: 42px;
}