@import "~scss/_mixins";

.mediaAudio { width: 100%; container-type: inline-size; container-name: media-audio; }
.mediaAudio {
    .controlsWrapper { width: 100%; position: relative; text-align: left; color: var(--color-text-primary); }
    .controlsWrapper {
        .name { @include text-common; display: inline-block; vertical-align: top; line-height: 20px; padding-bottom: 3px; }
        .name {
			span { display: inline-block; min-width: 100%; height: 100%; @include clamp1; }
		}

        @container media-audio (max-width: 208px) { 
			.controls { column-gap: 5px; }
			.timeText { display: none; }
		}

		.controls { display: flex; align-items: center; column-gap: 10px; }
        .controls {
            .icon { width: 20px; height: 20px; vertical-align: top; transition: none; flex-shrink: 0; }
            .icon.play { background-image: url('~img/icon/audio/play.svg'); margin-left: -4px; }
            .icon.play.active { background-image: url('~img/icon/audio/pause.svg'); }
            .icon.volume { background-image: url('~img/icon/audio/volume.svg'); }
            .icon.volume.isMuted { background-image: url('~img/icon/audio/mute.svg'); }

			.volumeWrap { height: 32px; display: flex; align-items: center; }

			.timeDragWrapper { flex: 1 0 auto; }
            .timeText { @include text-small; text-wrap: nowrap; width: 36px; text-align: center; }

            .input-drag-horizontal { display: inline-block; vertical-align: top; height: 20px; }
            .input-drag-horizontal {
                .icon { width: 6px; height: 6px; border: 0px; background: none; cursor: default; }
                .bullet { width: 12px; height: 12px; border-radius: 6px; background: var(--color-control-accent); }
                .fill { height: 4px; background: var(--color-control-accent); transform: translateY(-50%); margin-top: 0px; }
                .back { width: 100%; height: 4px; background: var(--color-shape-secondary); transform: translateY(-50%); margin-top: 0px; }
            }

        }
        
        #timeDrag { margin: 6px 0px; width: 100%; display: block; }
        
    }
}

