@layer components-base{.tabs{grid-template-rows:auto 1fr;grid-template-columns:100%;width:100%;display:grid;position:relative}.tabs--vertical{grid-template-rows:100%;grid-template-columns:auto 1fr}.tabs--vertical .tabs__list{flex-direction:column;grid-area:1/1;align-items:stretch}.tabs--vertical .tabs__content{grid-area:1/2}.tabs__list{align-self:flex-start;display:inline-flex}.tabs__content{grid-area:2/1}.tab-fade-enter-active{z-index:1;width:100%;position:absolute}.tab-fade-enter-active,.tab-fade-leave-active{transition:opacity .4s cubic-bezier(.25,.74,.22,.99)}.tab-fade-leave-active{z-index:0}.tab-fade-leave-active~.tab-fade-leave-active{width:100%;position:absolute!important}.tab-fade-enter-from,.tab-fade-leave-to{opacity:0}.tab-fade-enter-to,.tab-fade-leave-from{opacity:1}}@layer components{.tabs__trigger{flex:1}.tabs__trigger+.tabs__trigger.btn--outline-box{clip-path:inset(-20px 0 -20px 1px);margin-left:-1px;position:relative}.tabs__trigger.btn--outline-box:last-child{clip-path:inset(-20px 1px);margin-right:-1px}.tabs--horizontal .tabs__list{width:100%}.tabs--vertical .tabs__list{margin-bottom:0;margin-right:calc(var(--spacing)*2)}}