.player {
    display: flex;
    align-items: center;
    gap: var(--padding);
    width: 100%;
}

.player .play {
	position: relative;
	width: 18px;
	height: 18px;

	background: transparent;
	opacity: 1;
	transition: var(--hover);
	cursor: pointer;
}

.player .play .line {
	width: 100%;
	height: 1px;
	background: var(--black);

	will-change: transform;

	transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
	position: absolute;
	z-index: 1;
}

.player .play:hover .line {
	transition: var(--trans);
    background: var(--grey);
}

/* Play */
.player .play .line:nth-of-type(1) {
	transform: translateX(-50%) rotate(90deg);
	left: 0px;
}
.player .play .line:nth-of-type(2) {
	transform: translateX(0%) translateY(-9px) rotate(30deg);
    right: 0px;
    transform-origin: left center;
}
.player .play .line:nth-of-type(3) {
	transform: translateX(0%) translateY(9px) rotate(330deg);
    right: 0px;
    transform-origin: left center;
}
.player .play .line:nth-of-type(4) {
	transform: translateX(0) rotate(90deg);
	left: 0px;
	opacity: 0;
}

/* Pause */
.player .play.pause .line:nth-of-type(1) {
	transform: translateX(-50%) rotate(90deg);
	left: 0px;
}
.player .play.pause .line:nth-of-type(2) {
	transform: translateX(50%) translateY(-9px) rotate(90deg);
	opacity: 0;
}
.player .play.pause .line:nth-of-type(3) {
	transform: translateX(50%) translateY(10px) rotate(270deg);
	opacity: 0;
}
.player .play.pause .line:nth-of-type(4) {
	opacity: 1;
}

.player .seek-bar {
    flex: 1;
	height: 2px;
    margin: 0;
	padding: 0 !important;
    cursor: pointer;
    appearance: none;
    outline: none;
}

.player .seek-bar::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
	margin-top: 1px;
    background: var(--black);
    border-radius: 50%;
    cursor: pointer;

	transition: var(--hover);
}

.player .seek-bar::-webkit-slider-thumb:hover {
	background: var(--grey);
}

.player .seek-bar::-moz-range-thumb {
    width: 10px;
    height: 10px;
	margin-top: 1px;
	background: var(--black);
    border-radius: 50%;
    cursor: pointer;

	transition: var(--hover);
}

.player .seek-bar::-moz-range-thumb {
	background: var(--grey);
}

.player .time {
    font-size: var(--p);
    color: var(--black);
    min-width: 40px;
    text-align: right;
}