/* stylelint-disable max-nesting-depth */
.PromoPlayerControls {
    @media (max-width: 768px) {
        height: 120px;
        position: relative;
    }

    & .ErrorMessage {
        padding-top: 0;
    }

    & .LoadingIndicator {
        padding-left: 270px;

        @media (max-width: 1024px) {
            padding-left: 180px;
        }

        @media (max-width: 768px) {
            padding-left: 0;
        }

    }

    &-track-info {
        padding-bottom: 5px;

        @media (max-width: 768px) {
            text-align: center;
        }
    }

    & .TrackInfo,
    & .TrackInfo-track-number,
    & .TrackInfo-track-name,
    & .TrackInfo-artist-name {
        color: var(--gray-800, $gray-800);
        font-size: 14px;
        font-weight: normal;
    }

    &-controls {
        display: inline-block;

        @media (max-width: 768px) {
            left: calc(50% - 75px);
            position: absolute;
            top: 95px;
        }
    }

    &-next-control,
    &-previous-control,
    &-playback-control,
    &-time-line,
    &-time-text {
        display: inline-block;
        padding: 0 $spacing_sm;

        @media (max-width: 768px) {
            padding: 0 20px;
        }
    }

    &-previous-control {
        padding-left: 0;
    }

    &-next-control {
        padding-right: 0;
    }

    & .Icons-play {
        height: 14px;
        width: 12px;
    }

    & .Icons-play,
    & .Icons-audio-player-pause-lite,
    & .Icons-audio-player-previous-lite,
    & .Icons-audio-player-next-lite {
        @media (max-width: 768px) {
            height: 24px;
            width: 24px;
        }
    }

    &-time-line {
        width: 250px;
    }

    &-time-line {
        @media (max-width: 768px) {
            padding: 0;
            position: absolute;
            top: 75px;
            width: 100%;
        }
    }

    &-time-text {
        width: 125px;

        @media (max-width: 768px) {
            line-height: 1;
            position: absolute;
            text-align: center;
            top: 50px;
            width: 100%;
        }
    }

    & .TimeText {
        color: var(--gray-700, $gray-700);
    }

    &.PromoPlayerControls-dark .TrackInfo,
    &.PromoPlayerControls-dark .TrackInfo-track-number,
    &.PromoPlayerControls-dark .TrackInfo-track-name,
    &.PromoPlayerControls-dark .TrackInfo-artist-name,
    &.PromoPlayerControls-dark .TimeText {
        color: var(--koala, $koala);
    }

    #audio-player-pause-lite-path {
        fill: var(--primary-ws);
    }

}
/* stylelint-enable max-nesting-depth */