@layer core.molecules{.phxsg-tabs{--_comp-tabs-gap: var(--comp-tabs-gap, var(--sys-spacing-4));--_comp-tabs-border-color: var(--comp-tabs-border-color, var(--sys-color-outline));--_comp-tabs-divider-color: var(--comp-tabs-divider-color, var(--_comp-tabs-border-color));--_comp-tabs-divider-opacity: var(--comp-tabs-divider-opacity, .4);--_comp-tabs-hover-opacity: var(--comp-tabs-hover-opacity, .06);--_comp-tabs-indicator-color: var(--comp-tabs-indicator-color, currentcolor);--_comp-tabs-indicator-thickness: var(--comp-tabs-indicator-thickness, 2px);--_comp-tabs-padding-inline: var(--comp-tabs-padding-inline, var(--sys-spacing-4));--_comp-tabs-padding-block: var(--comp-tabs-padding-block, var(--sys-spacing-3));--_comp-tabs-radius: var(--comp-tabs-radius, var(--sys-shape-corner-medium));display:grid;gap:var(--_comp-tabs-gap);overflow:hidden;width:100%;position:relative}.phxsg-tabs--vertical{grid-template-columns:minmax(0,280px) minmax(0,1fr);align-items:start}.phxsg-tabs__header,.phxsg-tabs__container{min-width:0;position:relative}.phxsg-tabs__container{min-height:100%}.phxsg-tabs__slot{display:inline-flex;align-items:center;justify-content:center;height:100%;position:absolute;inset-block-start:0;z-index:2;cursor:pointer}.phxsg-tabs__slot--start{inset-inline-start:0}.phxsg-tabs__slot--end{inset-inline-end:0}.phxsg-tabs__scroll{min-width:0;width:100%;height:100%;position:relative;overflow:hidden}.phxsg-tabs__scroll:after{content:"";height:1px;position:absolute;inset-inline:0;inset-block-end:0;z-index:1;opacity:var(--_comp-tabs-divider-opacity);background:var(--_comp-tabs-divider-color);pointer-events:none}.phxsg-tabs__wrapper{--comp-scroll-container-mask-size: 3rem;min-width:0;position:relative;overflow-y:hidden;scrollbar-width:none}.phxsg-tabs__wrapper::-webkit-scrollbar{display:none}.phxsg-tabs__list{display:flex;align-items:stretch;gap:var(--_comp-tabs-gap);min-width:max-content;width:fit-content}.phxsg-tabs--stretch .phxsg-tabs__list{gap:0;min-width:100%;width:100%}.phxsg-tabs--vertical .phxsg-tabs__scroll:after{height:100%;width:1px;inset-block:0;inset-inline:auto 0}.phxsg-tabs--vertical .phxsg-tabs__wrapper{overflow:visible}.phxsg-tabs--vertical .phxsg-tabs__list{flex-direction:column;min-width:0;width:100%}.phxsg-tabs__item{display:flex;flex-direction:column;flex:0 0 auto}.phxsg-tabs--stretch .phxsg-tabs__item{flex:1 1 100%}.phxsg-tabs--stretch .phxsg-tabs__item:not(:last-child){position:relative}.phxsg-tabs--stretch .phxsg-tabs__item:not(:last-child):after{content:"";width:1px;height:60%;position:absolute;inset-block-start:50%;inset-inline-end:0;transform:translateY(-50%);opacity:var(--_comp-tabs-divider-opacity);background:var(--_comp-tabs-divider-color)}.phxsg-tabs--vertical .phxsg-tabs__item:after{content:none}.phxsg-tabs__button{display:inline-flex;gap:var(--sys-spacing-2);align-items:center;justify-content:center;width:100%;height:100%;padding:var(--_comp-tabs-padding-block) var(--_comp-tabs-padding-inline);position:relative;white-space:nowrap;color:inherit;font:inherit;text-align:center;background:transparent;border:0;border-radius:var(--_comp-tabs-radius) var(--_comp-tabs-radius) 0 0;cursor:pointer}.phxsg-tabs__button--alternate{justify-content:flex-start;text-align:start}.phxsg-tabs__button--expandable{justify-content:space-between}.phxsg-tabs__button--empty{min-inline-size:0}.phxsg-tabs__button:before{content:"";position:absolute;inset:0;opacity:0;background:currentcolor;transition:opacity var(--sys-motion-duration-medium-2) var(--sys-motion-easing-standard);pointer-events:none}.phxsg-tabs__button:not(.phxsg-tabs__button--alternate):is(:hover,:focus-visible):before{opacity:var(--_comp-tabs-hover-opacity)}.phxsg-tabs--vertical .phxsg-tabs__button{justify-content:flex-start;text-align:start;border-radius:var(--_comp-tabs-radius) 0 0 var(--_comp-tabs-radius)}.phxsg-tabs__button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.phxsg-tabs__button:disabled,.phxsg-tabs__button:disabled:hover{opacity:.4;cursor:not-allowed}.phxsg-tabs__button-label,.phxsg-tabs__button-short-label,.phxsg-tabs__button-icon,.phxsg-tabs__button-badge{position:relative;z-index:1}.phxsg-tabs__button--expandable .phxsg-tabs__button-label{overflow:hidden;width:0;white-space:pre;transition:width var(--sys-motion-duration-medium-2) var(--sys-motion-easing-standard)}.phxsg-tabs__button--expandable.phxsg-is-active .phxsg-tabs__button-label{width:auto}.phxsg-tabs__button-icon{width:1em;height:1em;flex:0 0 auto;fill:currentcolor}.phxsg-tabs__button-badge{padding-inline:var(--sys-spacing-2);padding-block:.125rem;border-radius:999px;color:var(--sys-color-on-surface, currentcolor);font-size:.875em;line-height:1.2;background-color:color-mix(in srgb,currentcolor 12%,transparent)}.phxsg-tabs__indicator{width:0;height:var(--_comp-tabs-indicator-thickness);position:absolute;inset-block:auto 0;inset-inline:0 auto;z-index:2;background:var(--_comp-tabs-indicator-color);border-radius:999px;transition:transform var(--sys-motion-duration-medium-2) var(--sys-motion-easing-standard),width var(--sys-motion-duration-medium-2) var(--sys-motion-easing-standard),height var(--sys-motion-duration-medium-2) var(--sys-motion-easing-standard);pointer-events:none}.phxsg-tabs--vertical .phxsg-tabs__indicator{width:var(--_comp-tabs-indicator-thickness);height:0;inset-block:0 auto}.phxsg-tabs__panels{--_comp-tabs-panel-transition-duration: var( --comp-tabs-panel-transition-duration, var(--sys-motion-duration-medium-2) );--_comp-tabs-panel-transition-timing: var(--comp-tabs-panel-transition-timing, var(--sys-motion-easing-standard));--_comp-tabs-panel-offset: var(--comp-tabs-panel-offset, 40%);min-width:0;width:100%;position:relative;transition:height var(--_comp-tabs-panel-transition-duration) var(--_comp-tabs-panel-transition-timing)}.phxsg-tabs--vertical .phxsg-tabs__panels{flex:1 1 auto}.phxsg-tabs__panel{width:100%;padding-block:var(--sys-spacing-2);position:absolute;inset-block-start:0;inset-inline-start:0;opacity:1}.phxsg-tabs__panel--enter-active,.phxsg-tabs__panel--leave-active{transition:transform var(--_comp-tabs-panel-transition-duration) var(--_comp-tabs-panel-transition-timing),opacity var(--_comp-tabs-panel-transition-duration) var(--_comp-tabs-panel-transition-timing)}.phxsg-tabs--stretch .phxsg-tabs__panel{padding-inline:var(--_comp-tabs-padding-inline)}.phxsg-tabs__panel--enter-from{opacity:0;transform:translate(calc(var(--_comp-tabs-panel-offset) * -1))}.phxsg-tabs__panel--enter-to,.phxsg-tabs__panel--leave-from{opacity:1;transform:translate(0)}[dir=rtl] .phxsg-tabs__panel--enter-from{transform:translate(var(--_comp-tabs-panel-offset))}.phxsg-tabs__panel--leave-active{pointer-events:none;opacity:0;transform:translate(var(--_comp-tabs-panel-offset))}[dir=rtl] .phxsg-tabs__panel--leave-active{transform:translate(calc(var(--_comp-tabs-panel-offset) * -1))}.phxsg-tabs--vertical .phxsg-tabs__panel--enter-from{transform:translateY(calc(var(--_comp-tabs-panel-offset) * -1))}.phxsg-tabs--vertical .phxsg-tabs__panel--enter-to,.phxsg-tabs--vertical .phxsg-tabs__panel--leave-from{transform:translateY(0)}.phxsg-tabs--vertical .phxsg-tabs__panel--leave-active{transform:translateY(var(--_comp-tabs-panel-offset))}@media screen and (min-width:768px){.phxsg-tabs__button{justify-content:flex-start;text-align:start}}}