.tapp-tabs{isolation:isolate;border-radius:var(--border-radius-pill);background-color:var(--tabs-inactive-default-background-color);display:inline-grid}.tapp-tabs__inner,.tapp-tabs__shadow{grid-area:1/1/-1/-1}.tapp-tabs__shadow{pointer-events:none;filter:drop-shadow(var(--highlight-shadow));position:relative}.tapp-tabs__indicator{clip-path:inset(0 var(--offset-right) 0 var(--offset-left) round var(--border-radius-pill));transition:clip-path var(--transition-duration) ease-in-out;position:absolute;inset:0;transform:perspective(0)}.tapp-tabs__indicator:after,.tapp-tabs__indicator:before{content:"";z-index:-1;transition:inherit;position:absolute;inset:0}.tapp-tabs__indicator:before{background-color:var(--tabs-active-default-border-color);clip-path:inset(0 var(--offset-right) 0 var(--offset-left) round var(--border-radius-pill))}.tapp-tabs__indicator:after{--top:calc(0% + var(--button-tertiary-border-width));--right:calc(var(--offset-right) + var(--button-tertiary-border-width));--bottom:calc(0% + var(--button-tertiary-border-width));--left:calc(var(--offset-left) + var(--button-tertiary-border-width));content:"";background-color:var(--tabs-active-default-background-color);clip-path:inset(var(--top) var(--right) var(--bottom) var(--left) round var(--border-radius-pill))}.tapp-tabs__inner{grid-auto-flow:column;padding:0;list-style:none;display:grid;position:relative}.tapp-tabs__component{cursor:pointer;width:100%;height:100%;padding:var(--spacing-3) var(--spacing-6);border-radius:var(--border-radius-pill);font:var(--typography-large-button-base);color:var(--tabs-inactive-default-text-color);text-align:left;transition:color var(--transition-duration) ease-in-out;align-items:center;text-decoration:none;display:inline-grid}@media (width>=40em){.tapp-tabs__component{padding:var(--spacing-4) var(--spacing-8)}}.tapp-tabs__component:focus,.tapp-tabs__component:hover{color:var(--tabs-inactive-hover-text-color)}.tapp-tabs__component--active{color:var(--tabs-active-default-text-color)}.tapp-tabs__component--active:focus,.tapp-tabs__component--active:hover{color:var(--tabs-active-hover-text-color)}.tapp-tabs__component--fake{color:var(--tabs-active-default-text-color);background-color:var(--tabs-active-default-background-color);filter:drop-shadow(var(--highlight-shadow));box-shadow:inset 0 0 0 var(--button-tertiary-border-width) var(--tabs-active-default-border-color)}
