.wp-block-rsr-responsive-tabs {
  --rsr-tabs-bg: var(--wp--preset--color--oxblood, #400600);
  --rsr-tabs-button-bg: var(--wp--preset--color--red, #ff2600);
  --rsr-tabs-button-fg: var(--wp--preset--color--white, #ffffff);
  --rsr-tabs-button-border: var(--wp--preset--color--red, #ff2600);
  --rsr-tabs-button-muted: var(--wp--preset--color--red, #ff2600);
  --rsr-tabs-gap: clamp(2rem, 7vw, 8rem);
  --rsr-tabs-button-gap: clamp(0.65rem, 1vw, 0.9rem);
  --rsr-tabs-button-padding-block: clamp(0.65rem, 0.58rem + 0.35vw, 0.9rem);
  --rsr-tabs-button-padding-inline: clamp(1.25rem, 0.96rem + 1.45vw, 2.25rem);
  --rsr-tabs-button-font-size: clamp(0.95rem, 0.91rem + 0.18vw, 1.0625rem);
  --rsr-tabs-block-padding-block: var(--wp--preset--spacing--60);
  --rsr-tabs-padding-block-total: calc(var(--rsr-tabs-block-padding-block) * 2);
  --rsr-tabs-layout-max-height: calc(100vh - var(--rsr-tabs-padding-block-total));
  --rsr-tabs-nav-max-height: min(85vh, var(--rsr-tabs-layout-max-height));
  --rsr-tabs-mask-size: 2.75rem;
  --rsr-tabs-panels-height: auto;
  --rsr-tabs-sticky-offset: 50vh;
  box-sizing: border-box;
  color: var(--wp--preset--color--white, #ffffff);
  container-type: inline-size;
  max-block-size: 100vh;
  overflow: clip;
  padding: var(--rsr-tabs-block-padding-block) var(--wp--preset--spacing--20);
  position: relative;
}

.wp-block-rsr-responsive-tabs:not(.has-background) {
  background-color: var(--rsr-tabs-bg);
}

.wp-block-rsr-responsive-tabs *,
.wp-block-rsr-responsive-tabs *::before,
.wp-block-rsr-responsive-tabs *::after {
  box-sizing: inherit;
}

.rsr-responsive-tabs__layout {
  align-items: start;
  display: grid;
  gap: var(--rsr-tabs-gap);
  inline-size: 100%;
  margin-inline: auto;
  max-block-size: var(--rsr-tabs-layout-max-height);
  max-inline-size: var(--wp--style--global--wide-size, 1266px);
  min-inline-size: 0;
  overflow: clip;
}

.rsr-responsive-tabs__tab-shell {
  align-items: center;
  background: inherit;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  inline-size: 100%;
  inset-block-start: var(--wp-admin--admin-bar--height, 0px);
  max-inline-size: 100%;
  padding-block: 0.5rem;
  position: sticky;
  z-index: 5;
}

.rsr-responsive-tabs__tablist-wrap {
  -webkit-mask-image: var(--rsr-tabs-mask, none);
  inline-size: 100%;
  mask-image: var(--rsr-tabs-mask, none);
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.rsr-responsive-tabs__tablist-wrap::-webkit-scrollbar {
  display: none;
}

.rsr-responsive-tabs__tablist {
  align-items: center;
  display: flex;
  gap: var(--rsr-tabs-button-gap);
  inline-size: max-content;
  list-style: none;
  margin: 0;
  min-inline-size: max-content;
  padding: 0;
}

.rsr-responsive-tabs__tab,
.rsr-responsive-tabs__scroll-button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  margin: 0;
}

.rsr-responsive-tabs__tab {
  align-items: center;
  background: transparent;
  border: 1px solid var(--rsr-tabs-button-border);
  border-radius: 999px;
  color: var(--rsr-tabs-button-muted);
  display: inline-flex;
  font-size: var(--rsr-tabs-button-font-size);
  font-weight: 600;
  justify-content: center;
  line-height: 1.15;
  min-block-size: clamp(2.45rem, 2.14rem + 1.55vw, 3.25rem);
  padding: var(--rsr-tabs-button-padding-block) var(--rsr-tabs-button-padding-inline);
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}

.rsr-responsive-tabs__tab.is-active,
.rsr-responsive-tabs__tab[aria-selected="true"] {
  background: var(--rsr-tabs-button-bg);
  border-color: var(--rsr-tabs-button-bg);
  color: var(--rsr-tabs-button-fg);
}

.rsr-responsive-tabs__tab:focus-visible,
.rsr-responsive-tabs__scroll-button:focus-visible,
.rsr-responsive-tabs__panel:focus-visible {
  outline: 2px solid var(--wp--preset--color--white, #ffffff);
  outline-offset: 0.25rem;
}

.rsr-responsive-tabs__scroll-button {
  align-items: center;
  background: rgba(255, 38, 0, 0.18);
  background: color-mix(in srgb, var(--rsr-tabs-button-bg) 18%, transparent);
  border: 1px solid rgba(255, 38, 0, 0.6);
  border-color: color-mix(in srgb, var(--rsr-tabs-button-border) 60%, transparent);
  border-radius: 999px;
  color: var(--rsr-tabs-button-fg);
  display: none;
  font-size: 1.35rem;
  font-weight: 700;
  inline-size: 2.4rem;
  justify-content: center;
  min-block-size: 2.4rem;
  padding: 0;
}

.rsr-responsive-tabs__scroll-button[hidden] {
  display: none;
}

.rsr-responsive-tabs[data-rsr-tabs-overflow="true"] .rsr-responsive-tabs__scroll-button:not([hidden]) {
  display: inline-flex;
}

.rsr-responsive-tabs__scroll-button:disabled {
  cursor: default;
  opacity: 0.3;
}

.rsr-responsive-tabs__scroll-button span {
  display: none;
}

.rsr-responsive-tabs__scroll-button--previous::before {
  content: "\2039";
}

.rsr-responsive-tabs__scroll-button--next::before {
  content: "\203a";
}

.rsr-responsive-tabs[data-rsr-tabs-axis="vertical"] .rsr-responsive-tabs__scroll-button--previous::before {
  content: "\2191";
}

.rsr-responsive-tabs[data-rsr-tabs-axis="vertical"] .rsr-responsive-tabs__scroll-button--next::before {
  content: "\2193";
}

.rsr-responsive-tabs__tablist-wrap[data-rsr-overflow="true"][data-rsr-can-scroll-start="false"][data-rsr-can-scroll-end="true"] {
  --rsr-tabs-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--rsr-tabs-mask-size)), transparent);
}

.rsr-responsive-tabs__tablist-wrap[data-rsr-overflow="true"][data-rsr-can-scroll-start="true"][data-rsr-can-scroll-end="false"] {
  --rsr-tabs-mask: linear-gradient(to right, transparent, #000 var(--rsr-tabs-mask-size), #000 100%);
}

.rsr-responsive-tabs__tablist-wrap[data-rsr-overflow="true"][data-rsr-can-scroll-start="true"][data-rsr-can-scroll-end="true"] {
  --rsr-tabs-mask: linear-gradient(to right, transparent, #000 var(--rsr-tabs-mask-size), #000 calc(100% - var(--rsr-tabs-mask-size)), transparent);
}

.rsr-responsive-tabs__panels {
  block-size: var(--rsr-tabs-panels-height, auto);
  display: grid;
  max-block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  overflow: clip;
  position: relative;
}

.rsr-responsive-tabs[data-rsr-tabs-panel-overflow="true"] .rsr-responsive-tabs__panels {
  overflow-x: hidden;
  overflow-y: auto;
}

.rsr-responsive-tabs__panel {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  justify-content: center;
  min-inline-size: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.rsr-responsive-tabs__panel > * {
  inline-size: 100%;
}

.rsr-responsive-tabs__panel.has-link-color a:where(:not(.wp-element-button)) {
  color: var(--rsr-tabs-panel-link-color);
}

.rsr-responsive-tabs__panel[hidden] {
  display: block;
}

.rsr-responsive-tabs__panel.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.rsr-responsive-tabs__panel > :first-child {
  margin-block-start: 0;
}

.rsr-responsive-tabs__panel > :last-child {
  margin-block-end: 0;
}

@container (min-width: 58rem) {
  .rsr-responsive-tabs__layout {
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
  }

  .rsr-responsive-tabs__tab-shell {
    align-self: start;
    grid-template-columns: minmax(0, max-content);
    grid-template-rows: auto minmax(0, auto) auto;
    inline-size: max-content;
    inset-block-start: var(--rsr-tabs-sticky-offset);
    justify-items: start;
    max-block-size: var(--rsr-tabs-nav-max-height);
    max-inline-size: min(24rem, 30cqi);
    padding-block: 0;
  }

  .rsr-responsive-tabs__tablist-wrap {
    align-self: center;
    max-block-size: var(--rsr-tabs-nav-max-height);
    max-inline-size: 100%;
    min-block-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .rsr-responsive-tabs__tablist {
    align-items: flex-start;
    flex-direction: column;
    inline-size: max-content;
    min-inline-size: 0;
  }

  .rsr-responsive-tabs__tab {
    max-inline-size: 100%;
  }

  .rsr-responsive-tabs__scroll-button {
    align-self: center;
    justify-self: center;
  }

  .rsr-responsive-tabs__scroll-button--previous:not([hidden]) {
    align-self: end;
  }

  .rsr-responsive-tabs__scroll-button--next:not([hidden]) {
    align-self: start;
  }

  .rsr-responsive-tabs[data-rsr-tabs-axis="vertical"] .rsr-responsive-tabs__tablist-wrap[data-rsr-overflow="true"][data-rsr-can-scroll-start="false"][data-rsr-can-scroll-end="true"] {
    --rsr-tabs-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--rsr-tabs-mask-size)), transparent);
  }

  .rsr-responsive-tabs[data-rsr-tabs-axis="vertical"] .rsr-responsive-tabs__tablist-wrap[data-rsr-overflow="true"][data-rsr-can-scroll-start="true"][data-rsr-can-scroll-end="false"] {
    --rsr-tabs-mask: linear-gradient(to bottom, transparent, #000 var(--rsr-tabs-mask-size), #000 100%);
  }

  .rsr-responsive-tabs[data-rsr-tabs-axis="vertical"] .rsr-responsive-tabs__tablist-wrap[data-rsr-overflow="true"][data-rsr-can-scroll-start="true"][data-rsr-can-scroll-end="true"] {
    --rsr-tabs-mask: linear-gradient(to bottom, transparent, #000 var(--rsr-tabs-mask-size), #000 calc(100% - var(--rsr-tabs-mask-size)), transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rsr-responsive-tabs__tab {
    transition-duration: 0ms;
  }
}