/* ICONS */
.icon {
	width: 24px;
	height: 24px;
	transform: scale(var(--icon-scale, 1));

	stroke: white;
	fill: transparent;
	stroke-width: 1pt;
	stroke-miterlimit: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 400;

	margin: 0 auto;
}

/* ICON - ADD (with box) */
.icon.add {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	border: 2px solid;
	transform: scale(var(--icon-scale, 1));
	border-radius: 4px;
}

.icon.add::after,
.icon.add::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 10px;
	height: 2px;
	background: currentColor;
	border-radius: 5px;
	top: 8px;
	left: 4px;
}

.icon.add::after {
	width: 2px;
	height: 10px;
	top: 4px;
	left: 8px;
}

/* ICON - ATTACHMENT */
.icon.attachment {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
	border: 2px solid;
	border-top: 0;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	transform: scale(var(--icon-scale, 1));
	margin-top: 11px;
}

.icon.attachment::after,
.icon.attachment::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border-radius: 3px;
	border: 2px solid;
}

.icon.attachment::after {
	border-bottom: 0;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	right: -2px;
	width: 10px;
	height: 14px;
	bottom: 8px;
}

.icon.attachment::before {
	width: 6px;
	height: 12px;
	border-top: 0;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	left: 2px;
	bottom: 4px;
}

/* ICON - BLURB */
.icon.blurb {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	border: 2px solid;
	border-radius: 3px;
	width: 22px;
	height: 16px;
}

.icon.blurb::after,
.icon.blurb::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	height: 2px;
	border-radius: 3px;
	background: currentColor;
	bottom: 2px;
}

.icon.blurb::before {
	width: 10px;
	left: 2px;
	box-shadow: 4px -4px 0;
}

.icon.blurb::after {
	width: 3px;
	right: 2px;
	box-shadow: -11px -4px 0;
}

/* ICON - CALENDAR */
.icon.calendar,
.icon.calendar::before {
	display: block;
	box-sizing: border-box;
}

.icon.calendar {
	position: relative;
	transform: scale(var(--icon-scale, 1));
	width: 18px;
	height: 18px;
	border: 2px solid;
	border-top: 4px solid;
	border-radius: 3px;
}

.icon.calendar::before {
	content: "";
	position: absolute;
	width: 10px;
	border-radius: 3px;
	left: 2px;
	background: currentColor;
	height: 2px;
	top: 2px;
}

/* ICON - CAMERA */
.icon.camera {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	border: 2px solid;
	border-radius: 3px;
	width: 18px;
	height: 12px;
	perspective: 24px;
}

.icon.camera::after,
.icon.camera::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
}

.icon.camera::before {
	border: 2px solid;
	border-left-color: transparent;
	transform: rotateY(-70deg);
	width: 8px;
	height: 8px;
	right: -7px;
	top: 0;
}

.icon.camera::after {
	width: 10px;
	height: 5px;
	border-top: 2px solid;
	border-right: 2px solid;
	top: -5px;
	right: 2px;
	border-top-right-radius: 2px;
}

/* ICON - CHAT */
.icon.chat {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 14px;
	height: 10px;
}

.icon.chat::after,
.icon.chat::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border-radius: 3px;
	height: 2px;
	background: currentColor;
}

.icon.chat::before {
	width: 10px;
	opacity: 0.5;
	box-shadow: 0 4px 0;
}

.icon.chat::after {
	width: 14px;
	bottom: 0;
}

/* ICON - CIRCLE */
.icon.circle {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 19px;
	height: 19px;
	border: 2px solid;
	border-radius: 100px;
}

/* ICON - CLOSE */
.icon.close {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	border: 2px solid;
	border-radius: var(--border-radius);
}

.icon.close::after,
.icon.close::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 12px;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
	border-radius: var(--border-radius);
	top: 8px;
	left: 3px;
}

.icon.close::after {
	transform: rotate(-45deg);
}

/* ICON - CONTROLLER */
.icon.controller {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 8px;
	height: 8px;
	border: 2px solid;
	border-radius: 100px;
}

.icon.controller::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 14px;
	height: 14px;
	box-shadow:
		-6px -6px 0 -4px,
		6px 6px 0 -4px,
		6px -6px 0 -4px,
		-6px 6px 0 -4px;
	left: -5px;
	top: -5px;
	transform: rotate(45deg);
}

/* ICON - DOWNLOAD */
.icon.download {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 6px;
	border: 2px solid;
	border-top: 0;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	margin-top: 8px;
}

.icon.download::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 8px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	transform: rotate(-45deg);
	left: 2px;
	bottom: 4px;
}

.icon.download::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border-radius: 3px;
	width: 2px;
	height: 10px;
	background: currentColor;
	left: 5px;
	bottom: 5px;
}

/* ICON - ESSAY */
.icon.essay {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 18px;
	border: 2px solid;
	border-radius: 3px;
	box-shadow: 0 -1px 0;
}

.icon.essay::after,
.icon.essay::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 6px;
	top: 2px;
}

.icon.essay::before {
	background: currentColor;
	left: 2px;
	box-shadow:
		0 4px 0,
		0 8px 0;
	border-radius: 3px;
	height: 2px;
}

.icon.essay::after {
	height: 10px;
	border: 2px solid;
	right: 2px;
	border-radius: 1px;
}

/* ICON - EXCHANGE */
.icon.exchange,
.icon.exchange::after,
.icon.exchange::before {
	display: block;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
}

.icon.exchange {
	position: relative;
	transform: scale(var(--icon-scale, 1));
	box-shadow:
		-3px 3px 0 -1px,
		3px -3px 0 -1px;
}

.icon.exchange::after,
.icon.exchange::before {
	content: "";
	position: absolute;
	border: 2px solid;
}

.icon.exchange::before {
	top: -5px;
	left: -5px;
}

.icon.exchange::after {
	bottom: -5px;
	right: -5px;
}

/* ICON - FORUM */
.icon.forum {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 14px;
	border-bottom: 2px solid;
}

.icon.forum::after,
.icon.forum::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: 2px;
}

.icon.forum::before {
	border-left: 4px solid;
	left: 1px;
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
}

.icon.forum::after {
	width: 8px;
	height: 6px;
	border-top: 2px solid;
	border-bottom: 2px solid;
	right: 0;
}

/* ICON - FORWARD */
.icon.forward-copy {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 16px;
	box-shadow: 6px -6px 0 -4px;
}

.icon.forward-copy::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 8px;
	border: 2px solid;
	border-radius: 1px;
	left: 0;
	bottom: 0;
}

.icon.forward-copy::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	background: currentColor;
	width: 2px;
	height: 10px;
	transform: rotate(45deg);
	bottom: 8px;
	right: 2px;
	border-radius: 4px;
}

/* ICON - HOME */
.icon.home {
	background:
		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px,
		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px;
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 18px;
	height: 14px;
	border: 2px solid;
	border-top: 0;
	border-bottom: 0;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	margin-bottom: -2px;
}

.icon.home::after,
.icon.home::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
}

.icon.home::before {
	border-top: 2px solid;
	border-left: 2px solid;
	border-top-left-radius: 4px;
	transform: rotate(45deg);
	top: -5px;
	border-radius: 3px;
	width: 14px;
	height: 14px;
	left: 0;
}

.icon.home::after {
	width: 8px;
	height: 10px;
	border: 2px solid;
	border-radius: 100px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
	left: 3px;
	bottom: 0;
}

/* ICON - LIVE */
.icon.live {
	transform: scale(var(--icon-scale, 1));
}

.icon.live,
.icon.live::after,
.icon.live::before {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
	border: 2px solid;
	border-bottom-color: transparent;
	border-radius: 50%;
}

.icon.live::after,
.icon.live::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	top: 2px;
	left: 2px;
}

.icon.live::after {
	width: 22px;
	height: 22px;
	top: -6px;
	left: -6px;
}

/* ICON - MIC */
.icon.mic {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 12px;
	border-bottom-left-radius: 120px;
	border-bottom-right-radius: 120px;
	border: 2px solid;
	border-top: 0;
	margin-top: 3px;
}

.icon.mic::after,
.icon.mic::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
}

.icon.mic::after {
	border: 2px solid;
	width: 8px;
	height: 18px;
	left: 2px;
	top: -10px;
	border-radius: 4px;
}

.icon.mic::before {
	width: 10px;
	height: 4px;
	top: 12px;
	left: 1px;
	border-right: 4px solid transparent;
	box-shadow:
		0 2px 0,
		inset -2px 0 0;
}

/* ICON - MINUS */
.icon.minus {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 2px;
	background: currentColor;
	border-radius: 10px;
}

/* ICON - MORE */
.icon.more {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 24px;
	height: 20px;
	border: 2px solid;
	border-radius: 3px;
}

.icon.more::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	display: block;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 20px;
	top: 6px;
	left: 8px;
	box-shadow:
		-5px 0 0,
		5px 0 0;
}

/* ICON - MOREBORDERLESS */
.icon.more-borderless {
	transform: scale(var(--icon-scale, 1));
}

.icon.more-borderless,
.icon.more-borderless::after,
.icon.more-borderless::before {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 4px;
	height: 4px;
	background: currentColor;
	border-radius: 100%;
}

.icon.more-borderless::after,
.icon.more-borderless::before {
	content: "";
	position: absolute;
	top: 0;
}

.icon.more-borderless::after {
	left: -6px;
}

.icon.more-borderless::before {
	right: -6px;
}

/* ICON - MORECIRCLE */
.icon.more-circle {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 24px;
	height: 24px;
	border: 2px solid;
	border-radius: 24px;
}

.icon.more-circle::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	display: block;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 20px;
	top: 8px;
	left: 8px;
	box-shadow:
		-5px 0 0,
		5px 0 0;
}

/* ICON - PHONE */
.icon.phone {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	transform: scale(var(--icon-scale, 1));
}

.icon.phone::after,
.icon.phone::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
}

.icon.phone::after {
	width: 18px;
	height: 18px;
	border-top-left-radius: 1px;
	border-bottom-right-radius: 1px;
	border-bottom-left-radius: 12px;
	border-left: 4px solid;
	border-bottom: 4px solid;
	left: 2px;
	bottom: 2px;
	background:
		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
}

.icon.phone::before {
	width: 20px;
	height: 20px;
	border: 6px double;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	transform: rotate(-45deg);
	bottom: 2px;
	left: 2px;
}

/* ICON - PLUS */
.icon.plus,
.icon.plus::after,
.icon.plus::before {
	display: block;
	box-sizing: border-box;
}

.icon.plus::after,
.icon.plus::before {
	border-radius: 10px;
	background: currentColor;
}

.icon.plus {
	position: relative;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 16px;
}

.icon.plus::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 16px;
	top: 0;
	left: 7px;
}

.icon.plus::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	top: 7px;
	left: 0;
}

/* ICON - REPLY */
.icon.reply {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 16px;
	height: 16px;
	box-shadow: -6px -6px 0 -4px;
}

.icon.reply::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 8px;
	border: 2px solid;
	border-radius: 1px;
	right: 0;
	bottom: 0;
}

.icon.reply::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	background: currentColor;
	width: 2px;
	height: 10px;
	transform: rotate(-45deg);
	bottom: 8px;
	left: 2px;
	border-radius: 4px;
}

/* ICON - RESOURCES */
.icon.resources,
.icon.resources::after {
	display: block;
	box-sizing: border-box;
	border-radius: 22px;
}

.icon.resources {
	position: relative;
	transform: scale(var(--icon-scale, 1));
	width: 20px;
	height: 20px;
	border: 2px solid transparent;
}

.icon.resources::after {
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	background: currentColor;
	top: 6px;
	left: 6px;
	box-shadow:
		0 7px 0 1px,
		0 -7px 0 1px,
		-7px 0 0 1px,
		7px 0 0 1px;
}

/* ICON - SEND */
.icon.send {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	border: 2px solid;
	border-radius: 4px;
}

.icon.send::after,
.icon.send::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 2px;
	height: 8px;
	border-right: 2px solid;
	top: 5px;
	right: 5px;
}

.icon.send::after {
	width: 6px;
	height: 6px;
	border-bottom: 2px solid;
	transform: rotate(-45deg);
	right: 9px;
	top: 6px;
}

/* ICON - TALK */
.icon.talk {
	transform: scale(var(--icon-scale, 1));
}

.icon.talk,
.icon.talk::after {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 100px;
	border: 2px dotted currentColor;
}

.icon.talk::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border: 1px solid transparent;
	top: 4px;
	left: 4px;
	box-shadow:
		0 0 0 2px,
		inset 0 0 0 2px currentColor;
}

/* ICON - TRASH */
.icon.trash {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 10px;
	height: 12px;
	border: 2px solid transparent;
	box-shadow:
		0 0 0 2px,
		inset -2px 0 0,
		inset 2px 0 0;
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;
	margin-top: 4px;
}

.icon.trash::after,
.icon.trash::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
}

.icon.trash::after {
	background: currentColor;
	border-radius: 3px;
	width: 16px;
	height: 2px;
	top: -4px;
	left: -5px;
}

.icon.trash::before {
	width: 10px;
	height: 4px;
	border: 2px solid;
	border-bottom: transparent;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	top: -7px;
	left: -2px;
}

/* ICON - USER */
.icon.user,
.icon.user::after,
.icon.user::before {
	display: block;
	box-sizing: border-box;
	border: 2px solid;
	border-radius: 100px;
}

.icon.user {
	overflow: hidden;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	position: relative;
}

.icon.user::after,
.icon.user::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 8px;
	height: 8px;
}

.icon.user::after {
	border-radius: 200px;
	top: 11px;
	left: 0px;
	width: 18px;
	height: 18px;
}

/* ICON - WORK */
.icon.work {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 20px;
	height: 20px;
	border: 2px solid;
	border-radius: 22px;
}

.icon.work::after,
.icon.work::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
}

.icon.work::before {
	width: 12px;
	height: 6px;
	border: 2px solid;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	top: 2px;
	left: 2px;
	border-bottom: 0;
}

.icon.work::after {
	width: 18px;
	height: 2px;
	background: currentColor;
	left: -1px;
	top: 8px;
}

/* ICONS - RIGHT/LEFT */
.icon.right {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
}

.icon.right::after,
.icon.right::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 8px;
	border-right: 2px solid;
	border-top: 2px solid;
	transform: rotate(45deg);
	top: 7px;
	right: 6px;
}

.icon.right::after {
	right: 11px;
}

.icon.left {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
}

.icon.left::after,
.icon.left::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 8px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	transform: rotate(45deg);
	top: 7px;
	left: 6px;
}

.icon.left::after {
	left: 11px;
}

.icon.map-pin {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: rotate(45deg) scale(var(--icon-scale, 1));
	width: 18px;
	height: 18px;
	border-radius: 100% 100% 0 100%;
	border: 2px solid;
	margin-top: -4px;
}

.icon.map-pin::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 8px;
	border: 2px solid;
	top: 3px;
	left: 3px;
	border-radius: 40px;
}


/* AUDIO PLAYER ICONS */
.icon.skip-back {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	border: 2px solid;
	border-radius: 4px;
}

.icon.skip-back::after,
.icon.skip-back::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	height: 8px;
	top: 5px;
}

.icon.skip-back::before {
	width: 2px;
	border-radius: 2px;
	right: 11px;
	background: currentColor;
}

.icon.skip-back::after {
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: 5px solid;
	right: 5px;
}

.icon.rewind {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	border: 2px solid;
	border-radius: 4px;
	width: 22px;
	height: 22px;
}

.icon.rewind::after,
.icon.rewind::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 6px;
	height: 6px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	transform: rotate(45deg);
	top: 6px;
	left: 5px;
}

.icon.rewind::after {
	left: 9px;
}

.icon.play {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	border: 2px solid;
	border-radius: 4px;
}

.icon.play::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 0;
	height: 10px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid;
	top: 4px;
	left: 7px;
}

.icon.pause {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	border: 2px solid;
	border-radius: 4px;
}

.icon.pause::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 6px;
	height: 6px;
	left: 6px;
	top: 6px;
	border-left: 2px solid;
	border-right: 2px solid;
}

.icon.fastforward {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	border: 2px solid;
	border-radius: 4px;
	width: 22px;
	height: 22px;
}

.icon.fastforward::after,
.icon.fastforward::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 6px;
	height: 6px;
	border-right: 2px solid;
	border-top: 2px solid;
	transform: rotate(45deg);
	top: 6px;
	right: 5px;
}

.icon.fastforward::after {
	right: 9px;
}

.icon.skip-forward {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--icon-scale, 1));
	width: 22px;
	height: 22px;
	border: 2px solid;
	border-radius: 4px;
}

.icon.skip-forward::after,
.icon.skip-forward::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	height: 8px;
	top: 5px;
}

.icon.skip-forward::before {
	width: 2px;
	border-radius: 2px;
	left: 11px;
	background: currentColor;
}

.icon.skip-forward::after {
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid;
	left: 5px;
}