@wordpress/block-library/build-style/tabs/style.css

Block library for the WordPress editor.

.wp-block-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--wp--style--unstable-tabs-gap, var(--wp--style--tabs-gap-default));
  box-sizing: border-box;
  --tab-bg: var(--custom-tab-inactive-color, transparent);
  --tab-bg-hover: var(--custom-tab-hover-color, #eaeaea);
  --tab-bg-active: var(--custom-tab-active-color, #000);
  --tab-text: var(--custom-tab-text-color, #000);
  --tab-text-hover: var(--custom-tab-hover-text-color, #000);
  --tab-text-active: var(--custom-tab-active-text-color, #fff);
  --tab-opacity: 0.5;
  --tab-opacity-hover: 1;
  --tab-opacity-active: 1;
  --tab-outline-width: 0;
  --tab-underline-width: 0;
  --tab-side-border-width: 0;
  --tab-border-color: var(--custom-tab-inactive-color, transparent);
  --tab-border-color-hover: var(--custom-tab-hover-color, #000);
  --tab-border-color-active: var(--custom-tab-active-color, #000);
  --tab-padding-block: var(--wp--preset--spacing--20, 0.5em);
  --tab-padding-inline: var(--wp--preset--spacing--30, 1em);
  --tab-border-radius: 0;
  --tabs-divider-color: var(--custom-tab-active-color, #000);
}
.wp-block-tabs .tabs__title {
  display: none;
}
.wp-block-tabs .tabs__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-end;
  flex-grow: 1;
  flex-basis: 100%;
  gap: var(--wp--style--unstable-tabs-list-gap, var(--wp--style--tabs-gap-default));
  min-width: 100px;
}
.wp-block-tabs .tabs__list button.tabs__tab-label {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}
.wp-block-tabs .tabs__list .tabs__tab-label {
  box-sizing: border-box;
  display: block;
  width: max-content;
  margin: 0;
  opacity: var(--tab-opacity);
  padding-block: var(--tab-padding-block);
  padding-inline: var(--tab-padding-inline);
  text-decoration: none;
  cursor: pointer;
  background-color: var(--tab-bg);
  color: var(--tab-text);
  border: var(--tab-outline-width) solid var(--tab-border-color);
  border-block-end: var(--tab-underline-width) solid var(--tab-border-color);
  border-inline-end: var(--tab-side-border-width) solid var(--tab-border-color);
  border-radius: var(--tab-border-radius);
}
.wp-block-tabs .tabs__list .tabs__tab-label:focus-visible {
  outline: 2px solid var(--tab-border-color-active);
  outline-offset: 2px;
}
.wp-block-tabs .tabs__list .tabs__tab-label:hover {
  opacity: var(--tab-opacity-hover);
  background-color: var(--tab-bg-hover);
  color: var(--tab-text-hover);
  border-color: var(--tab-border-color-hover);
}
.wp-block-tabs .tabs__list .tabs__tab-label[aria-selected=true] {
  opacity: var(--tab-opacity-active);
  background-color: var(--tab-bg-active);
  color: var(--tab-text-active);
  border-color: var(--tab-border-color-active);
}
.wp-block-tabs:not(.is-vertical) .tabs__list {
  overflow-x: auto;
  border-block-end: 1px solid var(--tabs-divider-color);
}
.wp-block-tabs.is-vertical {
  flex-wrap: nowrap;
}
.wp-block-tabs.is-vertical .tabs__list {
  flex-grow: 0;
  flex-direction: column;
  max-width: 30%;
  border-inline-end: 1px solid var(--tabs-divider-color);
  border-block-end: none;
  overflow-x: hidden;
}
.wp-block-tabs.is-vertical .tabs__tab-label {
  max-width: 100%;
  text-align: end;
}

.wp-block-tabs.is-style-links {
  --tabs-divider-color: var(--custom-tab-hover-color, #000);
  --tab-bg: transparent;
  --tab-bg-hover: transparent;
  --tab-bg-active: transparent;
  --tab-text: var(--custom-tab-text-color, #000);
  --tab-text-hover: var(--custom-tab-hover-text-color, #000);
  --tab-text-active: var(--custom-tab-active-text-color, #000);
  --tab-border-color: var(--custom-tab-inactive-color, transparent);
  --tab-border-color-hover: var(--custom-tab-hover-color, #000);
  --tab-border-color-active: var(--custom-tab-active-color, #000);
  --tab-underline-width: 2px;
}
.wp-block-tabs.is-style-links .tabs__tab-label {
  /* preserve extra bottom space for underline */
  padding-block-end: 0.5em;
  border-bottom: 2px solid var(--tab-border-color);
}
.wp-block-tabs.is-style-links .tabs__tab-label[aria-selected=true] {
  background-color: inherit;
  color: var(--tab-text-active);
  border-color: var(--tab-border-color-active);
}
.wp-block-tabs.is-style-links .tabs__tab-label:hover:not([aria-selected=true]) {
  background-color: inherit;
  color: var(--tab-text-hover);
  border-color: var(--tab-border-color-hover);
}
.wp-block-tabs.is-style-links.is-vertical .tabs__list {
  border-block-end: none;
  border-inline-end: 1px solid var(--tabs-divider-color);
}
.wp-block-tabs.is-style-links.is-vertical .tabs__tab-label {
  /* switch underline to side for vertical */
  border-block-end: 0;
  --tab-underline-width: 0;
  --tab-side-border-width: 2px;
  padding-block-end: 0;
  padding-inline-end: 0.5em;
}

.wp-block-tabs.is-style-button {
  --tab-border-radius: 9999px;
  --tab-bg: var(--custom-tab-inactive-color, transparent);
  --tab-bg-hover: var(--custom-tab-hover-color, #000);
  --tab-bg-active: var(--custom-tab-active-color, #000);
  --tab-text: var(--custom-tab-text-color, #000);
  --tab-text-hover: var(--custom-tab-hover-text-color, #000);
  --tab-text-active: var(--custom-tab-active-text-color, #000);
  --tab-padding-block: 0.5em;
  --tab-padding-inline: 1em;
}
.wp-block-tabs.is-style-button .tabs__list {
  border-block-end: none;
  align-items: center;
}
.wp-block-tabs.is-style-button .tabs__tab-label {
  border-width: 0;
}
.wp-block-tabs.is-style-button .tabs__tab-label:hover:not([aria-selected=true]) {
  background-color: var(--tab-bg-hover);
}
.wp-block-tabs.is-style-button.is-vertical .tabs__list {
  border-block-end: none;
  border-inline-end: none;
  align-items: flex-end;
}