@db-ux/core-components 4.7.0-tabs-34782eb → 4.7.1

package/build/components/tabs/tabs.css

@@ -18,7 +18,85 @@
   pointer-events: none !important;
 }
 
-.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item::after {
+.db-tabs .db-tab-item::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--db-border-radius-xs);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .db-tabs .db-tab-item::after {
+    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+  }
+}
+
+.db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9]:not([hidden]) {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10]:not([hidden]),
+.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10]:not([hidden]),
+.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10]:not([hidden]) {
+  display: block;
+}
+
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item::after {
   block-size: var(--db-border-width-xs);
   inline-size: 0;
   transform: translate(-50%, 0);
@@ -26,23 +104,20 @@
   background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
 }
-.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item::after {
-  inset-block-end: calc(-1 * calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs))) !important;
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item[aria-selected=true]::after {
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
   block-size: var(--db-border-width-xs);
   inline-size: 100%;
 }
 @media (forced-colors: active), print {
-  .db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item[aria-selected=true]::after {
+  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
-.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item[aria-selected=true]::after {
-  inline-size: 100%;
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+  inset-block-end: calc(-1 * (var(--db-spacing-fixed-2xs) + var(--db-border-width-xs)));
 }
 
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item::after {
+.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
   block-size: 0;
   inline-size: var(--db-border-width-xs);
   transform: translate(0, -50%);
@@ -50,24 +125,21 @@
   background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
 }
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item::after {
-  inset-inline: calc(-1 * var(--db-tabs-line-gap-vertical, 0px)) auto;
-  z-index: 5;
+.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
+  inset-inline-start: 0;
+  z-index: -2;
 }
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item[aria-selected=true]::after {
+.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
   block-size: 100%;
   inline-size: var(--db-border-width-xs);
 }
 @media (forced-colors: active), print {
-  .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item[aria-selected=true]::after {
+  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item[aria-selected=true]::after {
-  block-size: 100%;
-}
 
-.db-tabs[data-orientation=vertical] .db-tab-list::before {
+.db-tabs[data-orientation=vertical] .db-tab-list::before, .db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   content: "";
   border-radius: var(--db-border-radius-xs);
@@ -82,259 +154,202 @@
   position: relative;
 }
 .db-tabs .db-tab-panel {
-  padding: var(--db-spacing-fixed-xs);
-  position: relative;
-  z-index: 1;
+  padding: 0 var(--db-spacing-fixed-xs);
 }
 .db-tabs .db-tab-list {
-  position: relative;
+  max-inline-size: 100%;
   z-index: 20;
 }
-.db-tabs .db-tab-list db-tab-item,
-.db-tabs .db-tab-list dbtabitem {
-  display: contents;
+.db-tabs .db-tab-list:has([id$=-tab-0]:checked) ~ [id$=-tab-panel-0]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-1]:checked) ~ [id$=-tab-panel-1]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-2]:checked) ~ [id$=-tab-panel-2]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-3]:checked) ~ [id$=-tab-panel-3]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-4]:checked) ~ [id$=-tab-panel-4]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-5]:checked) ~ [id$=-tab-panel-5]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-6]:checked) ~ [id$=-tab-panel-6]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-7]:checked) ~ [id$=-tab-panel-7]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-8]:checked) ~ [id$=-tab-panel-8]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-9]:checked) ~ [id$=-tab-panel-9]:not([hidden]) {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10]:not([hidden]) {
+  display: block;
+}
+.db-tabs {
+  /*
+  Variant Orientation HORIZONTAL
+  	*/
 }
 .db-tabs:not([data-orientation=vertical]) {
   flex-flow: column wrap;
 }
+.db-tabs:not([data-orientation=vertical]) .db-tab-panel {
+  inline-size: 100%;
+}
 .db-tabs:not([data-orientation=vertical]) .db-tab-list {
-  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-xs) 0 var(--db-spacing-fixed-xs);
-  background-image: linear-gradient(var(--db-adaptive-bg-basic-transparent-semi-default), var(--db-adaptive-bg-basic-transparent-semi-default));
-  background-position: left bottom;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  background-size: 100% var(--db-border-width-xs);
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item {
-  margin-block-end: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list[role=tablist],
-.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-list {
-  display: flex;
-  align-items: stretch;
-  overflow: auto;
+  /* horizontal track for pulse */
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
+  block-size: var(--db-border-width-xs);
+  inset-inline: var(--db-spacing-fixed-xs);
+  /* top position equals sum of: margin xs + padding xs + line-height + padding xs + margin 2xs */
+  inset-block-start: calc(3 * var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-2xs) + var(--db-icon-font-size));
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul {
+  overflow: auto hidden;
   inline-size: 100%;
 }
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item {
+  margin-block: var(--db-spacing-fixed-xs) calc(2 * var(--db-spacing-fixed-2xs) + var(--db-border-width-xs));
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul db-tab-item:first-of-type .db-tab-item,
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul dbtabitem:first-of-type .db-tab-item {
+  margin-inline-start: var(--db-spacing-fixed-xs);
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul db-tab-item:last-of-type .db-tab-item,
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul dbtabitem:last-of-type .db-tab-item {
+  margin-inline-end: var(--db-spacing-fixed-xs);
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:first-of-type {
+  margin-inline-start: var(--db-spacing-fixed-xs);
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
+  margin-inline-end: var(--db-spacing-fixed-xs);
+}
+.db-tabs {
+  /*
+  Variant Orientation VERTICAL
+   */
+}
 .db-tabs[data-orientation=vertical] {
   flex-direction: row;
 }
+.db-tabs[data-orientation=vertical] .db-tab-panel {
+  padding: var(--db-spacing-fixed-xs) 0;
+}
 .db-tabs[data-orientation=vertical] .db-tab-list {
-  --db-tabs-line-gap-vertical: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
   /*
   min and nominal size must both be set to ensure
   - min-inline-size: tab-list is not displayed narrower than defined
   - max-inline-size: tab-list is not displayed wider than defined
    */
-  min-inline-size: var(--db-sizing-3xl);
-  max-inline-size: var(--db-sizing-3xl);
-  padding-inline: var(--db-spacing-fixed-xs) var(--db-tabs-line-gap-vertical);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  min-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  max-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
+  /* horizontal space to the tab panels */
+  padding-inline-end: var(--db-spacing-fixed-xs);
+  /* ensures that tab-list (track) is only as high as all the tab-items together if open tab-panel is higher */
   margin-block-end: auto;
 }
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item label {
+  position: relative;
+}
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible), .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover {
+  inline-size: fit-content;
+}
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible) label, .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover label {
+  overflow: visible;
+}
+.db-tabs[data-orientation=vertical] .db-tab-list {
+  /* vertical track for pulse */
+}
 .db-tabs[data-orientation=vertical] .db-tab-list::before {
-  display: block;
-  inset-inline-start: 0;
-  inset-block: 0;
   inline-size: var(--db-border-width-xs);
-  z-index: 1;
+  inset-block: var(--db-spacing-fixed-xs);
+  inset-inline-start: 0;
 }
-.db-tabs[data-orientation=vertical] .db-tab-list[role=tablist],
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-list {
-  display: flex;
+.db-tabs[data-orientation=vertical] .db-tab-list > ul {
   flex-direction: column;
-  align-items: flex-start;
+  block-size: 100%;
 }
-.db-tabs[data-tab-item-width=full] .db-tab-list {
-  inline-size: 100%;
+.db-tabs[data-orientation=vertical] .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:first-of-type {
+  margin-block-start: var(--db-spacing-fixed-xs);
 }
-.db-tabs[data-tab-item-width=full] .db-tab-item {
-  flex: 1 0 0;
-  inline-size: 0;
-  max-inline-size: none;
-  justify-content: flex-start;
+.db-tabs[data-orientation=vertical] .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
+  margin-block-end: var(--db-spacing-fixed-xs);
 }
-.db-tabs[data-tab-item-width=full][data-tab-item-alignment=center] .db-tab-item {
-  text-align: center;
-  justify-content: center;
+.db-tabs[data-orientation=vertical] .db-tab-item {
+  padding-inline-start: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
 }
-.db-tabs[data-tab-item-width=full][data-tab-item-alignment=end] .db-tab-item {
-  text-align: end;
-  justify-content: end;
+.db-tabs[data-orientation=vertical] .db-tab-item input {
+  padding-inline-start: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
 }
-.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical])::before {
-  content: "";
-  position: absolute;
-  z-index: 19;
-  inset-block-start: calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) + var(--db-border-width-xs));
-  inset-inline: var(--db-spacing-fixed-xs);
-  block-size: var(--db-border-width-xs);
-  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
-  pointer-events: none;
+.db-tabs[data-orientation=vertical] db-tab-item:first-of-type .db-tab-item,
+.db-tabs[data-orientation=vertical] dbtabitem:first-of-type .db-tab-item {
+  margin-block-start: var(--db-spacing-fixed-xs);
 }
-[data-density=functional] .db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical])::before {
-  inset-block-start: calc(var(--db-sizing-sm) + var(--db-spacing-fixed-xs) + var(--db-border-width-xs));
+.db-tabs[data-orientation=vertical] db-tab-item:last-of-type .db-tab-item,
+.db-tabs[data-orientation=vertical] dbtabitem:last-of-type .db-tab-item {
+  margin-block-end: var(--db-spacing-fixed-xs);
 }
-[data-density=expressive] .db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical])::before {
-  inset-block-start: calc(var(--db-sizing-lg) + var(--db-spacing-fixed-xs) + var(--db-border-width-xs));
+.db-tabs[data-width=full] .db-tab-list {
+  inline-size: 100%;
 }
-.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical]) .db-tab-list {
-  background-image: none;
+.db-tabs[data-width=full] .db-tab-item,
+.db-tabs[data-width=full] .db-tab-item label {
+  inline-size: 100%;
 }
-.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical]) .db-tab-list::before {
-  content: none;
+.db-tabs[data-width=full][data-alignment=center] .db-tab-item label {
+  text-align: center;
+  justify-content: center;
 }
-.db-tabs[data-scroll-behavior=arrows] .db-tab-list::-webkit-scrollbar {
+.db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
   display: none;
 }
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
+.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-left)::before {
   content: "";
-  position: absolute;
-  z-index: 19;
-  inset-block-start: calc(var(--db-sizing-md) + var(--db-border-width-2xs));
-  inset-inline: 0;
-  block-size: var(--db-border-width-xs);
-  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
-}
-[data-density=functional] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
-  inset-block-start: calc(var(--db-sizing-sm) + var(--db-border-width-2xs));
 }
-[data-density=expressive] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
-  inset-block-start: calc(var(--db-sizing-lg) + var(--db-border-width-2xs));
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list {
-  padding: 0 0 calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
-  margin-block-start: 0;
-  background-image: none;
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list::before {
-  content: none;
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list .db-tab-item {
-  margin-block-end: 0;
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list .db-tab-item::after {
-  inset-block-end: calc(-1 * (var(--db-spacing-fixed-xs) - var(--db-border-width-2xs))) !important;
+.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-right)::after {
+  content: "";
 }
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
+.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
   position: absolute;
-  z-index: 22;
-  inset-block-start: 0;
-  aspect-ratio: unset;
-  min-block-size: unset;
-  border-block-width: 0;
-  padding-block: var(--db-spacing-fixed-xs) calc(var(--db-spacing-fixed-xs) + calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs)));
-  align-items: flex-start;
+  z-index: 21;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(textarea), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(textarea),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input) {
-  cursor: initial;
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=checkbox]), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=radio]:not(:checked)),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=checkbox]),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(textarea), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(textarea),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input) {
-  cursor: initial;
-}
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=checkbox]), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=radio]:not(:checked)),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=checkbox]),
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-@media screen and (forced-colors: active) {
-  .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
-  .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
-    border-block: var(--db-border-width-xs) solid transparent;
-    inset-block-start: calc(-1 * var(--db-border-width-xs));
-  }
+  inline-size: var(--db-sizing-md);
+  block-size: calc(var(--db-spacing-fixed-sm) + var(--db-sizing-md));
+  flex: 0 0 auto;
 }
-[data-density=functional] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
-[data-density=functional] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
-  padding-block: var(--db-spacing-fixed-2xs) calc(var(--db-spacing-fixed-2xs) + calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs)));
+.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before {
+  inset-inline-start: 0;
 }
-[data-density=expressive] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
-[data-density=expressive] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
-  padding-block: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs)));
+.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
+  inset-inline-end: 0;
+}
+.db-tabs[data-scroll-behavior=arrows] {
+  /*
+   * Scroll left / right buttons
+   */
 }
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start {
+.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button) {
   inset-inline-start: 0;
 }
-.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
+.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
   inset-inline-end: 0;
 }
+.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button),
+.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button,
+.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
+  position: absolute;
+  z-index: 22;
+  inset-block: var(--db-spacing-fixed-xs);
+}