cobalt-tabs-vertical {
  display: block;
}

.cobalt-tabs--vertical {
  display: flex;
  flex-direction: row;
}

.cobalt-tabs--vertical .cobalt-tabs-list {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  margin: 0;
  border-bottom: none;
  list-style: none;
}

.cobalt-tabs--vertical .cobalt-tabs-list.cobalt-tabs-list--small {
  width: 12.5rem; /* 200px */
}
.cobalt-tabs--vertical .cobalt-tabs-list.cobalt-tabs-list--medium {
  width: 17.5rem; /* 280px */
}
.cobalt-tabs--vertical .cobalt-tabs-list.cobalt-tabs-list--large {
  width: 22.5rem; /* 360px */
}

.cobalt-tabs--vertical .tab-content {
  flex-grow: 1;
  padding-top: 0px;
}

.cobalt-tabs--vertical .cobalt-tab-item {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 7.5rem;
  border-radius: var(--number-radius-small);
  padding: var(--number-spacing-small) 0;
  background-color: var(--color-selection-secondary-background-default);
  color: var(--color-selection-secondary-content-default);
}

.cobalt-tabs--vertical .tab-item--stretch {
  flex-grow: 1;
}

.cobalt-tabs--vertical .tab-item--disabled {
  cursor: not-allowed;
  color: var(--color-global-all-disabled-strong)
}

.cobalt-tabs--vertical .tab-item--selected {
  position: relative;
  background-color: var(--color-selection-secondary-background-selected);
  color: var(--color-selection-secondary-content-selected);
}

.cobalt-tabs--vertical .cobalt-tab-item  .tab-label-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--number-spacing-small);
  gap: var(--number-spacing-4xsmall);
  width: 100%;
}

.cobalt-tabs--vertical .tab-item--selected .tab-label-content::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  height: 100%;
  width: 2px;
  margin-right: var(--number-spacing-small); /* padding bottom minus indicator width */
  background-color: var(--color-selection-secondary-content-selected);
}

.cobalt-tabs--vertical .tab-label-content .tab-label {
  flex-grow: 1;
}

.cobalt-tabs--vertical .cobalt-tab-item:focus-visible {
  outline: 2px solid var(--color-global-border-focus);
  z-index: 1000; /* make sure outline is always on top of sibling elements */
}

.cobalt-tabs--vertical .cobalt-tab-item:not(.tab-item--disabled):not(.tab-item--selected):hover, .cobalt-tabs--vertical .cobalt-tab-item:not(.tab-item--disabled):not(.tab-item--selected):focus-visible {
  background-color: var(--color-selection-secondary-background-interacting);
  color: var(--color-selection-secondary-content-interacting);
}

.cobalt-tabs--vertical .cobalt-tab-item {
  min-width: 7em;
}