v4web-components/dist/collection/components/navigation/lab-ds-tab/lab-ds-tab.css

Stencil Component Starter

.v4-tabs {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
}

.v4-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--lab-ds-semantic-selectable-space-padding-sm);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-sm);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-m);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-m);
  width: 100%;

  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-regular);
  color: var(--lab-ds-semantic-color-fg-default);
  background-color: rgba(0, 0, 0, 0);
  white-space: nowrap;

  border-style: solid;
  border-radius: var(--lab-ds-semantic-container-border-radius-none);
  border-color: var(--lab-ds-semantic-selectable-color-border-default);
  border-bottom-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-top: none;
  border-left: none;
  border-right: none;
}

.v4-tab:disabled {
  border-color: var(--lab-ds-semantic-selectable-color-border-disabled);
  opacity: var(--lab-ds-core-opacity-80);
  color: var(--lab-ds-semantic-color-fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.more-items {
  justify-content: flex-start;
  padding-right: var(--lab-ds-semantic-selectable-space-padding-s);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  width: 9.25rem;
  height: 100%;
}

.inline:not(.disabled) .more-items.selected {
  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--lab-ds-semantic-selectable-color-primary-default);

  border-bottom-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-bottom-width: var(--lab-ds-semantic-selectable-border-width-m);
}

.contained:not(.disabled) .more-items.selected {
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-top: solid;
  color: var(--lab-ds-semantic-color-fg-default);

  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
  border-top-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-top-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xxs);
}

.inline:not(.disabled) .v4-tab:hover {
  background-color: var(--lab-ds-semantic-selectable-color-bg-hover);
  border-color: var(--lab-ds-semantic-selectable-color-primary-hover);
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
}

.contained:not(.disabled) .v4-tab:hover {
  color: var(--lab-ds-semantic-color-fg-default);
  border-top: solid;
  background-color: var(--lab-ds-semantic-selectable-color-bg-hover);

  border-top-color: var(--lab-ds-semantic-selectable-color-primary-hover);
  border-top-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xxs);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.contained:not(.disabled) .v4-tab:active {
  outline: none;
  border-style: solid;
  border-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
}

.inline:not(.disabled) .v4-tab:active {
  outline: none;
  border-style: solid;
  border-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xxs);
}

.inline .v4-tab.selected {
  border-top: none;
  border-left: none;
  border-right: none;
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
  color: var(--lab-ds-semantic-selectable-color-primary-default);

  border-bottom-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-bottom-width: var(--lab-ds-semantic-selectable-border-width-m);
}

.contained .v4-tab.selected {
  border-left: none;
  border-right: none;
  border-top: solid;
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);

  border-top-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-top-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-bottom-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-bottom-color: var(--lab-ds-semantic-selectable-color-border-default);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xxs);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.more-items-content {
  position: absolute;
  width: 9.25rem;
  justify-content: flex-start;
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
  box-shadow: var(--lab-ds-semantic-selectable-shadow-m);
}

.disabled .v4-tab {
  border-color: var(--lab-ds-semantic-selectable-color-border-disabled);
  opacity: var(--lab-ds-core-opacity-80);
  color: var(--lab-ds-semantic-color-fg-disabled);
}