form-audio .unselected,
form-audio .selecting,
form-audio .selected
{
	background: var(--color-background-input, #F2F2F2);
	height: 48px;
	padding: 0 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-subtext, #717171);
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	gap: 16px;
   cursor: pointer;
}
form-audio i
{
   font-size: 24px;
	color: var(--color-subtext, #717171);
}

form-audio .selecting,
form-audio .selecting i
{
   color: var(--system-danger);
}





form-audio .selected .play
{
   background: transparent;
   border: unset;
   width: 24px;
   height: 24px;
   padding: 0;
   outline: none;
}
form-audio .selected .play i
{
   font-size: 24px;
   color: var(--color-primary);
}
form-audio .selected .time,
form-audio .selected .time .duration
{
   color: var(--color-subtext, #717171);
   font-size: 14px;
   line-height: 20px;
}

form-audio .selected .time .position
{
   color: var(--color-primary, #161616);
   font-size: 14px;
   line-height: 20px;
}
form-audio .selected .delete
{
   color: var(--system-danger, #EB2A2A);
   text-align: center;
   font-size: 16px;
   line-height: 150%;
   display: flex;
   padding: 4px 8px;
   align-items: center;
   gap: 8px;
   border-radius: 32px;
   border: 1px solid var(--system-danger, #EB2A2A);
   background: transparent;
}
form-audio .selected .delete i
{
   font-size: 24px;
	color: var(--system-danger);
}

form-audio .selected input
{
   flex: 1;
	margin: 0;
	padding: 0;
   height: 8px;
	border-radius: 0;
	border: unset;
   -webkit-appearance: none;
   appearance: none;
   background: var(--system-black-20);
   pointer-events: none;
   box-shadow: none;
}
form-audio .selected input::-moz-range-progress
{
   -webkit-appearance: none;
   appearance: none;
   height: 100%;
   background: var(--color-accent-2);
}
form-audio .selected input::-webkit-slider-runnable-track
{
   -webkit-appearance: none;
   appearance: none;
   height: 100%;
   background: linear-gradient(90deg, var(--color-accent-2) 0%, var(--color-accent-2) var(--track-active-percent), transparent var(--track-active-percent));
}
form-audio .selected input::-moz-range-thumb
{
   -webkit-appearance: none;
   appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: unset;
   background: var(--color-accent-2);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   pointer-events: auto;
   cursor: pointer;
}
form-audio .selected input::-webkit-slider-thumb
{
   -webkit-appearance: none;
   appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: unset;
   background: var(--color-accent-2);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   pointer-events: auto;
   cursor: pointer;
   margin-top: -4px;
}















form-audio:not([tab="unselected"]) .unselected,
form-audio:not([tab="selecting"]) .selecting,
form-audio:not([tab="selected"]) .selected
{
   display: none;
}