:root {
  --rh--tab--color--border: #e3e7eb;
  --rh--tab--color--border--active: #cbced2;
}

.wp-block-generic-tabs {
  margin-bottom: var(--rh--size--general--margin--bottom);
}

.generic-tabs-title-list {
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 10;
}
.generic-tab-alignment-center > .generic-tabs-title-list {
  justify-content: center;
}
.generic-tab-alignment-right > .generic-tabs-title-list {
  justify-content: flex-end;
}

.generic-tab-title {
  background: none var(--rh--color--content);
  border: 1px solid var(--rh--tab--color--border);
  border-radius: 3px 3px 0 0;
  color: var(--rh--color--content--text);
  flex: 0 1 auto;
  opacity: 0.8;
  padding: 3px 13px;
  transition: none;
  white-space: nowrap;
  width: auto;
}
.generic-tab-title:focus, .generic-tab-title:hover {
  background: none var(--rh--color--content);
  border: 1px solid #cbced2;
  border-block-end-color: var(--rh--tab--color--border);
  color: var(--rh--color--content--text);
  opacity: 1;
  outline: none;
}
.generic-tab-title:focus > .generic-title-text, .generic-tab-title:focus-within > .generic-title-text {
  border-radius: 3px;
  outline: 2px solid var(--rh--color--ci--secondary);
  outline-offset: 3px;
}
.is-trusted-event .generic-tab-title > .generic-title-text {
  outline: none;
}
.generic-tab-title.is-active {
  background-color: var(--rh--color--content);
  border-block-width: 3px 0;
  border-color: var(--rh--tab--color--border--active);
  border-block-color: var(--rh--color--ci--secondary);
  opacity: 1;
  padding-block: 1px 4px;
}

.generic-tabs-content-wrap {
  margin-block-start: -1px;
  position: relative;
}
.generic-tabs-content-wrap::before, .generic-tabs-content-wrap::after {
  clear: both;
  content: "";
  display: table;
}

.generic-tabs-wrap {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
}
.generic-tabs-wrap.overflowed > .generic-tabs-title-list::before, .generic-tabs-wrap.overflowed > .generic-tabs-title-list::after {
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
  content: "";
  inset-block: 0 1px;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 0.3s 0s, visibility 0s 0s;
  visibility: visible;
  width: 200px;
  z-index: 8;
}
.generic-tabs-wrap.overflowed > .generic-tabs-title-list::before {
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
  left: 0;
  opacity: 0;
  right: auto;
  visibility: hidden;
}
.generic-tabs-wrap.has-scrolled > .generic-tabs-title-list::after {
  opacity: 0;
  visibility: hidden;
}
.generic-tabs-wrap.has-scrolled > .generic-tabs-title-list::before {
  opacity: 1;
  visibility: visible;
}

.wp-block-generic-tab {
  border: 1px solid var(--rh--tab--color--border);
  display: none;
  padding: 20px;
  text-align: left;
  width: 100%;
}
.wp-block-generic-tab[tabindex="0"] {
  display: block;
}