.pfl-seg {
--pfl-seg-dur: .6s;
--pfl-seg-ease: cubic-bezier(.22, 1, .36, 1);
isolation: isolate;
position: relative;
}
.pfl-seg > .pfl-seg__thumb {
box-sizing: border-box;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
transition: transform var(--pfl-seg-dur) var(--pfl-seg-ease), width var(--pfl-seg-dur) var(--pfl-seg-ease),
height var(--pfl-seg-dur) var(--pfl-seg-ease), opacity .25s ease;
will-change: transform;
z-index: 1;
}
.pfl-seg > .pfl-seg__overlay {
inset: 0;
pointer-events: none;
position: absolute;
transition: clip-path var(--pfl-seg-dur) var(--pfl-seg-ease), opacity .25s ease;
z-index: 2;
}
.pfl-seg.is-instant > .pfl-seg__thumb,
.pfl-seg.is-instant > .pfl-seg__overlay {
transition: none !important;
}
.pfl-seg__item {
box-sizing: border-box;
position: absolute;
white-space: nowrap;
} .pfl-seg__label {
align-items: center;
display: inline-flex;
flex-direction: column;
}
.pfl-seg__label::after {
content: attr(data-pfl-text);
font-weight: 700;
height: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.pfl-seg > .pfl-seg__thumb,
.pfl-seg > .pfl-seg__overlay {
transition: none;
}
}