@layer components{tabs-component{display:block}.tab-button{position:relative;display:inline-flex;align-items:center;padding-block:calc(var(--spacing) * 4);padding-inline:calc(var(--spacing) * 6);cursor:pointer;border:none;border-bottom:2px solid transparent;color:color-mix(in srgb,var(--color-black) 7%,transparent);background:transparent;transition:all var(--transition-fast);user-select:none;font:inherit}.tab-button[aria-selected=true],.tab-button:hover,.tab-button:focus,.tab-button:focus-visible{border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:600}.tab-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}.tab-content{padding:calc(var(--spacing) * 6);animation:tabFadeIn .15s ease-out forwards}.tab-content[hidden]{display:none}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.tab-content{animation:none}.tab-button{transition:none}}}