.flowtar-icon {display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; position: relative; width: var(--flowtar-icon-touch); flex-shrink: 0; flex-grow: 0; aspect-ratio: 1 / 1; margin: calc((var(--flowtar-icon-m) - var(--flowtar-icon-touch)) / 2);}
.flowtar-icon > svg {width: var(--flowtar-icon-m); aspect-ratio: 1 / 1; transition: all 0.4s ease-in-out;}
.flowtar-icon > svg > .e {fill: var(--flowtar-color-text-1); transition: all 0.4s ease-in-out;}
.flowtar-icon.m-invert > svg > .e {fill: #ffffff;}
.flowtar-icon.m-s {margin: calc((var(--flowtar-icon-s) - var(--flowtar-icon-touch)) / 2);}
.flowtar-icon.m-s > svg {width: var(--flowtar-icon-s);}
.flowtar-icon.m-l {margin: calc((var(--flowtar-icon-l) - var(--flowtar-icon-touch)) / 2);}
.flowtar-icon.m-l > svg {width: var(--flowtar-icon-l);}

.flowtar-icon.down-2 > svg > .e {transform-origin: center center;}
.flowtar-icon.down-2.m-up > svg > .e1 {transform: translate(-2px, -3px) rotate(-90deg);}
.flowtar-icon.down-2.m-up > svg > .e2 {transform: translate(2px, -3px) rotate(90deg);}

.flowtar-icon.hamburger-1 > svg > .e {transform-origin: center center;}
.flowtar-icon.hamburger-1.m-close > svg > .e1 {transform: translate(-3.4px, 3.4px) rotate(45deg);}
.flowtar-icon.hamburger-1.m-close > svg > .e2 {opacity: 0.0; transform: translateX(100%);}
.flowtar-icon.hamburger-1.m-close > svg > .e3 {transform: translate(-3.4px, -3.4px) rotate(-45deg);}

.flowtar-icon.play-1 > svg > .e {transform-origin: 6px 12px;}
.flowtar-icon.play-1.m-pause > svg > .e1 {transform: translateX(100%);}
.flowtar-icon.play-1.m-pause > svg > .e2 {transform: translateY(0) !important;}

.flowtar-icon.plus-1.m-minus > svg {transform: rotate(180deg);}
.flowtar-icon.plus-1.m-minus > svg > .e1 {opacity: 0.0;}