.o570-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, box-shadow, transform;
	transition-duration: 300ms;
	transition-timing-function: ease;
	will-change: transform;
}

.o570-pill__text {
	white-space: nowrap;
	line-height: 1;
	transition-property: color;
	transition-duration: 300ms;
}

.o570-pill__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	transition-property: background-color;
	transition-duration: 300ms;
}

.o570-pill__icon svg,
.o570-pill__icon i {
	display: block;
	transition-property: fill, color;
	transition-duration: 300ms;
}

/* Both icon copies always sit stacked, centered, on top of each other.
   This is what makes the "swap" possible — they occupy the exact same
   spot and only differ by transform + opacity. */
.o570-pill__icon-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition-property: transform, opacity;
	transition-timing-function: ease;
	transition-duration: inherit;
}

/* ============ Animation: none ============ */
.o570-anim-none .o570-pill__icon-inner--2 {
	display: none;
}

/* ============ Animation: diagonal slide (arrow swap) ============ */
.o570-anim-diagonal .o570-pill__icon-inner--1 {
	transform: translate(0, 0);
	opacity: 1;
}

.o570-anim-diagonal .o570-pill__icon-inner--2 {
	transform: translate(-130%, 130%);
	opacity: 0;
}

.o570-pill.o570-anim-diagonal:hover .o570-pill__icon-inner--1 {
	transform: translate(130%, -130%);
	opacity: 0;
}

.o570-pill.o570-anim-diagonal:hover .o570-pill__icon-inner--2 {
	transform: translate(0, 0);
	opacity: 1;
}

/* ============ Animation: rotate ============ */
.o570-anim-rotate .o570-pill__icon-inner--2 {
	display: none;
}

.o570-pill.o570-anim-rotate:hover .o570-pill__icon-inner--1 {
	transform: rotate(45deg);
}

/* ============ Animation: scale ============ */
.o570-anim-scale .o570-pill__icon-inner--2 {
	display: none;
}

.o570-pill.o570-anim-scale:hover .o570-pill__icon-inner--1 {
	transform: scale(1.25);
}

/* ============ Animation: spin ============ */
.o570-anim-spin .o570-pill__icon-inner--2 {
	display: none;
}

.o570-pill.o570-anim-spin:hover .o570-pill__icon-inner--1 {
	transform: rotate(360deg);
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}