@charset "utf-8";

.ds-tab { display: flex; flex-shrink: 0; align-items: center; position: relative; }

.ds-tab-gap--24 { gap: var(--fds-ref-spacing-2xlarge); }

.ds-tab-gap--20 { gap: var(--fds-ref-spacing-xlarge); }

.ds-tab-gap--16 { gap: var(--fds-ref-spacing-large); }

.ds-tab-gap--12 { gap: var(--fds-ref-spacing-medium); }

.ds-tab-gap--10 { gap: var(--fds-ref-spacing-small); }

.ds-tab-gap--8 { gap: var(--fds-ref-spacing-xsmall); }

.ds-tab-gap--6 { gap: var(--fds-ref-spacing-2xsmall); }

.ds-tab-gap--5 { gap: var(--fds-ref-spacing-2xsmall-nudge); }

.ds-tab-gap--4 { gap: var(--fds-ref-spacing-3xsmall); }

.ds-tab-gap--2 { gap: var(--fds-ref-spacing-4xsmall); }

.ds-tab.ds-tab-layout--underline { border-bottom: var(--fds-ref-border-width-thin) solid rgba(var(--b-sc),var(--fds-ref-alpha-8)); }

.ds-tab.ds-tab-layout--underline .ds-tab-item { border-radius: 0px; transition: color 0.2s; }

.ds-tab.ds-tab-layout--underline .ds-tab-item::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: var(--fds-ref-border-width-thick); border-radius: 0px; transform: scaleX(0); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

.ds-tab.ds-tab-layout--underline .ds-tab-item--active::after { transform: scaleX(1); }

.ds-tab.ds-tab-layout--underline.ds-tab-variant--primary .ds-tab-item::after { background: rgba(var(--hero),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--underline.ds-tab-variant--secondary .ds-tab-item::after { background: rgba(var(--oc-1),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--underline.ds-tab-variant--tertiary .ds-tab-item::after { background: rgba(var(--oc-2),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--underline.ds-tab-variant--transparent .ds-tab-item::after { background: rgba(var(--b-sc),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--filled .ds-tab-item { border-radius: var(--fds-ref-radius-full); transition: background 0.2s, color 0.2s; }

.ds-tab.ds-tab-layout--filled.ds-tab-variant--primary .ds-tab-item--active { background: rgba(var(--hero),var(--fds-ref-alpha-100)); color: rgba(var(--hero-sc),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--filled.ds-tab-variant--secondary .ds-tab-item--active { background: rgba(var(--oc-1),var(--fds-ref-alpha-100)); color: rgba(var(--oc-1-sc),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--filled.ds-tab-variant--tertiary .ds-tab-item--active { background: rgba(var(--oc-2),var(--fds-ref-alpha-100)); color: rgba(var(--oc-2-sc),var(--fds-ref-alpha-100)); }

.ds-tab.ds-tab-layout--filled.ds-tab-variant--transparent .ds-tab-item--active { background: rgba(var(--b-sc),var(--fds-ref-alpha-16)); color: rgba(var(--b-sc),var(--fds-ref-alpha-100)); }

[class*="is-web"] .ds-tab.ds-tab-layout--filled .ds-tab-item:not(.ds-tab-item--active):not(.ds-tab-item--disabled):hover { background: rgba(var(--b-sc),var(--fds-ref-alpha-4)); }

.ds-tab-item { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; user-select: none; cursor: pointer; flex-shrink: 0; color: rgba(var(--b-sc),var(--fds-ref-alpha-56)); transition: color 0.2s; }

.ds-tab-item .tab-item__label { position: relative; z-index: 1; }

.ds-tab-item.ds-tab-item-size--xs { height: var(--fds-sem-dimension-small); }

.ds-tab-item.ds-tab-item-size--xs .tab-item__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; position: relative; z-index: 1; }

.ds-tab-item.ds-tab-item-size--xs .tab-item__icon svg { width: 100%; height: 100%; display: block; }

.ds-tab-layout--underline .ds-tab-item.ds-tab-item-size--xs { gap: var(--fds-ref-spacing-3xsmall); padding-right: ; padding-left: ; padding-top: var(--fds-ref-spacing-4xsmall); padding-bottom: var(--fds-ref-spacing-xsmall); }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--xs { padding: var(--fds-ref-spacing-2xsmall); gap: 0px; }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--xs .tab-item__label { padding-left: var(--fds-ref-spacing-3xsmall); padding-right: var(--fds-ref-spacing-3xsmall); }

.ds-tab-item.ds-tab-item-size--sm { height: var(--fds-sem-dimension-medium); }

.ds-tab-item.ds-tab-item-size--sm .tab-item__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; position: relative; z-index: 1; }

.ds-tab-item.ds-tab-item-size--sm .tab-item__icon svg { width: 100%; height: 100%; display: block; }

.ds-tab-layout--underline .ds-tab-item.ds-tab-item-size--sm { gap: var(--fds-ref-spacing-2xsmall); padding-right: ; padding-left: ; padding-top: var(--fds-ref-spacing-3xsmall); padding-bottom: var(--fds-ref-spacing-xsmall); }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--sm { padding: var(--fds-ref-spacing-2xsmall) var(--fds-ref-spacing-medium); gap: 0px; }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--sm .tab-item__label { padding-left: var(--fds-ref-spacing-3xsmall); padding-right: var(--fds-ref-spacing-3xsmall); }

.ds-tab-item.ds-tab-item-size--md { height: var(--fds-sem-dimension-large); }

.ds-tab-item.ds-tab-item-size--md .tab-item__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--fds-sem-dimension-xsmall); height: var(--fds-sem-dimension-xsmall); position: relative; z-index: 1; }

.ds-tab-item.ds-tab-item-size--md .tab-item__icon svg { width: 100%; height: 100%; display: block; }

.ds-tab-layout--underline .ds-tab-item.ds-tab-item-size--md { gap: var(--fds-ref-spacing-xsmall); padding-right: ; padding-left: ; padding-top: var(--fds-ref-spacing-3xsmall); padding-bottom: var(--fds-ref-spacing-medium); }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--md { padding: var(--fds-ref-spacing-2xsmall) var(--fds-ref-spacing-large); gap: var(--fds-ref-spacing-4xsmall); }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--md .tab-item__label { padding-left: var(--fds-ref-spacing-3xsmall); padding-right: var(--fds-ref-spacing-3xsmall); }

.ds-tab-item.ds-tab-item-size--lg { height: var(--fds-sem-dimension-xlarge); }

.ds-tab-item.ds-tab-item-size--lg .tab-item__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--fds-sem-dimension-xsmall); height: var(--fds-sem-dimension-xsmall); position: relative; z-index: 1; }

.ds-tab-item.ds-tab-item-size--lg .tab-item__icon svg { width: 100%; height: 100%; display: block; }

.ds-tab-layout--underline .ds-tab-item.ds-tab-item-size--lg { gap: var(--fds-ref-spacing-xsmall); padding-right: ; padding-left: ; padding-top: var(--fds-ref-spacing-2xsmall); padding-bottom: var(--fds-ref-spacing-large); }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--lg { padding: var(--fds-ref-spacing-2xsmall) var(--fds-ref-spacing-large); gap: var(--fds-ref-spacing-3xsmall); }

.ds-tab-layout--filled .ds-tab-item.ds-tab-item-size--lg .tab-item__label { padding-left: var(--fds-ref-spacing-3xsmall); padding-right: var(--fds-ref-spacing-3xsmall); }

[class*="is-web"] .ds-tab-layout--underline .ds-tab-item:hover:not(.ds-tab-item--active):not(.ds-tab-item--disabled) { opacity: 0.7; color: rgba(var(--b-sc),var(--fds-ref-alpha-72)); }

.ds-tab-item--active { color: rgba(var(--b-sc),var(--fds-ref-alpha-100)); }

.ds-tab-item--disabled { color: rgba(var(--b-sc),var(--fds-ref-alpha-24)); cursor: not-allowed; pointer-events: none; }