:root {
  /* Tab Colors */
  --tabs-active-color: #1473e6;
  --tabs-border-color: #909090;
  --tabs-border-hover-color: #acacac;
  --tabs-text-color: #686868;
  --tabs-active-text-color: #2c2c2c;
  --tabs-bg-color: #f1f1f1;
  --tabs-active-bg-color: #fff;
  --tabs-list-bg-gradient: linear-gradient(
    to bottom, 
    rgba(136, 136, 136, 0) 0%,
    rgba(136, 136, 136, 0) 60%,
    rgba(136, 136, 136, 0.03) 80%,
    rgba(136, 136, 136, 0.08) 100%
  );
  --tabs-mobile-stacked-bg-color: #242424;
  --tabs-mobile-stacked-text-color: #ffffff;
  --tabs-pill-bg-color: #292929;
  --tabs-pill-bg-color-hover: #e1e1e1;
  --tabs-pill-bg-focus: #505050;
  --tabs-pill-bg-color-active: #505050;
  --tabs-pill-text-focus-color: #ffffff;
  --tabs-pill-text-color: #505050;
  --tabs-pill-text-selected-color: #ffffff;
  --tabs-paddle-bs-color: #0000001a;
  --tabs-radio-gray: #6d6d6d;
  --tabs-radio-blue: #0265dc;
  --tabs-radio-bg: #fff;
  --tabs-radio-button-bg: #fdfdfd;
}

:root .dark {
  --tabs-border-color: #909090;
  --tabs-text-color: #b6b6b6;
  --tabs-active-text-color: #fff;
  --tabs-bg-color: #1a1a1a;
  --tabs-active-bg-color: #1e1e1e;
  --tabs-list-bg-gradient: linear-gradient(
    rgba(0, 0, 0, 0%) 0%,
    rgba(0, 0, 0, 0%) 60%,
    rgba(0, 0, 0, 20%) 80%,
    rgba(0, 0, 0, 40%) 100%
  );
  --tabs-pill-bg-color: #ffffff;
  --tabs-pill-bg-focus: #6d6d6d;
  --tabs-pill-bg-color-hover: #6d6d6d;
  --tabs-pill-bg-color-active: #393939;
  --tabs-pill-text-color: #fff;
  --tabs-pill-text-selected-color: #000000;
  --tabs-pill-text-focus-color: #ffffff;
  --tabs-mobile-stacked-bg-color: #ffffff;
  --tabs-mobile-stacked-text-color: #131313;
  --tabs-paddle-bs-color: #ffffff1a;
  --tabs-radio-gray: #d4d4d4;
  --tabs-radio-blue: #5eaaf7;
  --tabs-radio-bg: #1e1e1e;
  --tabs-radio-button-bg: #000;
}

.tabs {
  position: relative;
  margin: 0;
  color: var(--tabs-active-text-color);
  background-color: var(--tabs-active-bg-color);
  z-index: 1;
}

.tabs.xxl-spacing {
  padding: var(--spacing-xxl) 0;
}

.tabs.xxl-spacing .paddle {
  top: var(--spacing-xxl);
}

.tabs.xl-spacing {
  padding: var(--spacing-xl) 0;
}

.tabs.xl-spacing .paddle {
  top: var(--spacing-xl);
}

.tabs.l-spacing {
  padding: var(--spacing-l) 0;
}

.tabs.l-spacing .paddle {
  top: var(--spacing-l);
}

.tabs.s-spacing {
  padding: var(--spacing-s) 0;
}

.tabs.s-spacing .paddle {
  top: var(--spacing-s);
}

.tabs.xs-spacing {
  padding: var(--spacing-xs) 0;
}

.tabs.xs-spacing .paddle {
  top: var(--spacing-xs);
}

.tabs .tabList {
  position: relative;
  box-shadow: 0 -1px 0 inset var(--tabs-border-color);
  display: flex;
  z-index: 2;
  margin: 0 var(--spacing-m);
  /* ScrollProps - If content exceeds height of container, overflow! */
  overflow: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox 64 */
  
  /* default bg */
  background: var(--tabs-list-bg-gradient);
  background-size: 100% 16px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.tabs .tabList::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.tabs .tab-headline {
  margin-top: var(--spacing-xxl);
  margin-bottom: var(--spacing-xl);
}

.tabs.center .tab-headline {
  text-align: center;
}

.tabs .tabList .tab-list-container {
  display: flex;
  width: var(--grid-container-width);
  margin: 0 auto;
  box-sizing: content-box;
}

/* center tabs */
.tabs.center > .tabList::after,
.tabs.center > .tabList::before {
  content: "";
  margin: auto;
}

.tabs.center:not(.same-width) .tabList .tab-list-container {
  width: auto;
}

.tabs .tab-content {
  border-bottom: 1px solid var(--tabs-border-color);
}

/* contained tabs content */
[role='tabpanel'] > .section > .content,
.tabs.contained .tab-content .tab-content-container {
  width: var(--grid-container-width);
  margin: 0 auto;
}

.tab-content [role='tabpanel'] .section {
  position: relative;
}

.tab-content [role='tabpanel'] .section picture.section-background {
  z-index: 0;
}

.tab-content [role='tabpanel'] .section > .content {
  z-index: 1;
  position: relative;
}

.tab-content [role='tabpanel'] .section[class*='-up'] > .content {
  width: 100%;
}

.tabs .tabList button {
  background: transparent;
  border-radius: 4px 4px 0 0;
  border: 1px solid transparent;
  color: var(--tabs-text-color);
  cursor: pointer;
  float: left;
  font-family: var(--body-font-family);
  font-weight: 600;
  margin-left: -1px;
  margin-top: 0;
  padding: 14px 16px 12px;
  text-decoration: none;
  transition: color 0.1s ease-in-out;
  white-space: nowrap;
  width: auto;
  z-index: 1;
}

.tabs.same-width .tabList button {
  flex: 1;
}

.tabs .paddle {
  position: absolute;
  cursor: pointer;
  width: 32px;
  height: 48px;
  top: 0;
  background: var(--tabs-active-bg-color);
  border: 0;
  border-bottom: 1px solid var(--tabs-border-color);
  padding: 14px 0 12px;
  display: flex;
  align-items: center;
}

.tabs.quiet .paddle {
  margin-top: 1px;
}

.tabs.radio .tabList,
.tabs.radio .tabList button,
.tabs.radio .paddle {
  box-shadow: none;
  background: none;
  border: none;
}

.tabs .tabList button:first-of-type {
  margin-left: 0;
  margin-top: 0;
}

.tabs .tabList button:hover {
  color: var(--tabs-active-text-color);
}

.tabs .tabList button:active {
  color: var(--tabs-active-color);
}

.tabs .tabList button[aria-selected="true"],
.tabs .tabList button[aria-checked="true"] {
  background: var(--tabs-active-bg-color);
  border-color: var(--tabs-border-color) var(--tabs-border-color) transparent;
  color: var(--tabs-active-text-color);
}

/* Tabs: .quiet, .pill */
.tabs.quiet .tabList button {
  border-width: 0 0 2px;
  border-color: transparent;
  background: transparent;
  padding-right: 0;
  padding-left: 0;
  margin-inline-start: 24px;
}

.tabs.quiet:is(.no-top-border, .no-border) .tabList,
.tabs.quiet:is(.no-top-border, .no-border) .paddle,
.tabs.quiet:is(.no-bottom-border, .no-border) .tab-content {
  border-bottom: none;
  box-shadow: none;
  background: none;
}

.tabs.quiet .tabList {
  padding-bottom: 1px;
}

.tabs[class*='pill'] .tab-content {
  border-bottom: none;
}

.tabs[class*='pill'] .tabList {
  box-shadow: unset;
  background: unset;
}

.tabs[class*='pill'] .tabList .tab-list-container {
  margin-top: var(--spacing-xxs);
  margin-bottom: var(--spacing-xxs);
}

.tabs[class*='pill'] .tabList button {
  color: var(--tabs-pill-text-color);
  margin: 0;
  margin-inline-start: 16px;
  border-radius: 75px;
  font-weight: 400;
  padding: 0.2em 1em;
  border: none;
}

.tabs.radio .tabList button {
  background: transparent;
  padding-block: 0 var(--spacing-s);
  padding-inline: 0;
  font-size: var(--type-body-s-size);
  font-weight: normal;
  color: var(--tabs-active-text-color);
  display: flex;
  align-items: center;
}

.tabs.quiet .tabList button:first-of-type,
.tabs[class*='pill'] .tabList button:first-of-type {
  margin-inline-start: 0;
}

.tabs.quiet .tabList button:hover {
  border-bottom-color: var(--tabs-border-hover-color);
}

.tabs.quiet .tabList button[aria-selected="true"],
.tabs.quiet .tabList button[aria-checked="true"] {
  border-bottom-color: var(--tabs-active-color);
}

.tabs[class*='pill'] .tabList button:focus {
  color: var(--tabs-pill-text-focus-color);
  background: var(--tabs-pill-bg-focus);
}

.tabs[class*='pill'] .tabList button:focus-visible {
  outline: 2px solid #4145ca;
}

.tabs[class*='pill'] .tabList button[aria-selected="true"],
.tabs[class*='pill'] .tabList button[aria-checked="true"] {
  color: var(--tabs-pill-text-selected-color);
  background: var(--tabs-pill-bg-color);
  text-shadow: 0.4px 0 0 var(--tabs-pill-text-color);
}

.tabs[class*='pill'] .tabList button:hover {
  color: var(--tabs-pill-text-color);
  background: var(--tabs-pill-bg-color-hover);
}

.tabs[class*='pill'] .tabList button:active {
  color: var(--tabs-pill-text-focus-color);
  background: var(--tabs-pill-bg-color-active);
}

.tabs[class*='pill'] .tabList button.l-pill {
  font-size: 16px;
  line-height: 20.8px;
  height: 40px;
}

.tabs[class*='pill'] .tabList button.m-pill {
  font-size: 14px;
  line-height: 18.2px;
  height: 32px;
}

.tabs[class*='pill'] .tabList button.s-pill {
  font-size: 12px;
  line-height: 15.6px;
  height: 24px;
}

.tabs .paddle {
  z-index: 3;
}

.tabs .paddle:disabled {
  cursor: default;
  box-shadow: none;
  background: var(--tabs-list-bg-gradient);
  background-size: 100% 16px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.tabs .paddle-left {
  box-shadow: 4px 0 4px -2px var(--tabs-paddle-bs-color);
  left: 0;
}

.tabs .paddle-right {
  box-shadow: -4px 0 4px -2px var(--tabs-paddle-bs-color);
  right: 0;
}

.tabs .paddle svg {
  opacity: 1;
  width: 8px;
  height: 14px;
  margin: 0 auto;
  transition: opacity 150ms ease;
  color: var(--tabs-text-color);
}

.tabs .paddle-left svg {
  transform: rotate(180deg);
}

.tabs .paddle:hover svg {
  color: var(--tabs-active-text-color);
}

.tabs .paddle:disabled svg {
  opacity: 0;
}

.tabs[class*='pill'] .paddle {
  background: unset;
  border: none;
}

.tabs.radio:not(.dark) {
  background: none;
}

.tabs.radio .tab-content {
  border: none;
}

.tabs.radio .paddle {
  display: none;
}

.tabs.radio .tabList {
  margin-block: 0;
  margin-inline: auto;
  inline-size: var(--grid-container-width);
}

.tabs.radio .tabList.tabList .tab-list-container {
  background: var(--tabs-radio-bg);
  border: 1px solid var(--tabs-border-color);
  border-radius: 24px;
  padding-block: var(--spacing-xs) var(--spacing-s);
  padding-inline: var(--spacing-s);
  font-size: var(--type-body-s-size);
  color: var(--tabs-active-text-color);
  flex-direction: column;
  align-items: start;
  inline-size: 100%;
}

.tabs.radio .tabList button:last-of-type {
  padding-inline-end: 0;
  padding-block-end: 0;
}

.tabs.radio .tabList button::before {
  content: '';
  border: 2px solid var(--tabs-radio-gray);
  border-radius: 100%;
  block-size: 14px;
  min-inline-size: 14px;
  margin-inline-end: 12px;
  background: var(--tabs-radio-button-bg);
  transition: border 150ms;
  box-sizing: border-box;
}

.tabs.radio .tabList button:hover::before {
  border-color: var(--tabs-radio-blue);
}

.tabs.radio .tabList button[aria-selected="true"]::before,
.tabs.radio .tabList button[aria-checked="true"]::before {
  border: 5px solid var(--tabs-radio-blue);
}

.tabs.radio .tab-list-container::before {
  content: attr(data-pretext);
  font-weight: var(--type-detail-all-weight);
  line-height: var(--type-body-xs-lh);
  margin-block-end: var(--spacing-xs);
}

.tabs.radio .tabList :is(button, button:hover, button:focus-visible, button[aria-selected="true"], button[aria-checked="true"]) {
  background: unset;
  border-radius: unset;
  outline: revert;
  outline-offset: revert;
  margin-inline-start: revert;
  color: inherit;
  text-shadow: revert;
}

/* Section Metadata */
.tabs-background-transparent .tabs,
.tabs-background-transparent .tabs .tabList,
.tabs-background-transparent .tabs .tabList button[aria-selected="true"],
.tabs-background-transparent .tabs .tabList button[aria-checked="true"],
.tabs-background-transparent .tabs .tabList .paddle {
  background: transparent;
}

.tabs.radio.center .tabList {
  justify-content: center;
}

.tabs.radio.right .tabList {
  justify-content: end;
}

.dark .tabs.radio .tab-list-container::before,
.dark .tabs.radio .tabList button {
  color: var(--color-white);
}

.tabs-background-transparent .tabs .tabList button[aria-selected="true"],
.tabs-background-transparent .tabs .tabList button[aria-checked="true"] {
  border-bottom-color: var(--tabs-active-bg-color);
}

@media screen and (min-width: 600px) {
  .tabs.radio .tabList.tabList .tab-list-container {
    flex-direction: row;
    align-items: center;
    border-radius: 40px;
    padding-block: 0;
    padding-inline: var(--spacing-s);
    inline-size: auto;
    max-inline-size: var(--grid-container-width);
    margin: 0;
    gap: var(--spacing-s);
  }

  .tabs.radio .tab-list-container::before {
    margin-block-end: 0;
    margin-inline-end: -8px;
  }

  .tabs.radio .tabList button {
    white-space: normal;
    text-align: start;
  }

  .tabs.radio .tabList button,
  .tabs.radio .tabList button:last-of-type {
    padding-block: var(--spacing-xs);
    padding-inline: 0;
    min-block-size: 56px;
  }
}

@media screen and (min-width: 1200px) {
  [role='tabpanel'] > .section[class*='-up'] > .content,
  [role='tabpanel'] > .section[class*='grid-width-'] > .content {
    width: auto;
  }

  .tabs .tabList {
    min-height: 62px;
  }

  .tabs .tabList button {
    padding: 24px 32px 18px;
    line-height: 18px;
  }

  .tabs.quiet .tabList button {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .tabs .paddle {
    height: 62px;
  }

  .tabs .paddle svg {
    top: 24px;
  }
}

@media screen and (max-width: 599px) {
  .tabs.stacked-mobile .tabList {
    margin: 0;
  }

  .tabs.stacked-mobile .paddle {
    display: none;
  }

  .tabs.stacked-mobile .tabList .tab-list-container {
    flex-direction: column;
    margin: 30px auto;
  }

  .tabs.stacked-mobile .tabList button {
    font-size: 20px;
    white-space: unset;
    word-wrap: break-word;
    line-height: 25px;
    padding: 8px;
    border-radius: 0;
    border: 0;
    margin-bottom: 8px;
  }

  .tabs.stacked-mobile .tabList button:last-of-type {
    margin-bottom: 0;
  }

  .tabs.stacked-mobile .tabList button[aria-selected="true"],
  .tabs.stacked-mobile .tabList button[aria-checked="true"] {
    background-color: var(--tabs-mobile-stacked-bg-color);
    color: var(--tabs-mobile-stacked-text-color);
  }

  .tabs.stacked-mobile.center .tabList .tab-list-container {
    width: 100%;
    margin: 0 30px 30px;
  }

  .tabs.stacked-mobile.quiet .tabList button {
    margin-inline-start: 0;
  }

  .tabs[class*='stacked-mobile'] .paddle {
    background: unset;
    border: none;
  }
}