:root {
  /* Tab Colors */
  --tabs-active-color: #1473e6;
  --tabs-border-color: #d8d8d8;
  --tabs-border-hover-color: #acacac;
  --tabs-text-color: #7e7e7e;
  --tabs-active-text-color: #2C2C2C;
  --tabs-bg-color: #f1f1f1;
  --tabs-active-bg-color: #fff;
  --tabs-list-bg-gradient: linear-gradient(rgb(255 255 255 / 0%) 60%, rgb(245 245 245 / 80%));
  --tabs-pill-bg-color: #e1e1e1;
  --tabs-pill-bg-color-hover: #dadada;
  --tabs-pill-bg-color-active: #c6c6c6;
  --tabs-pill-text-color: #131313;
  --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: rgb(56 56 56);
  --tabs-text-color: #cdcdcd;
  --tabs-active-text-color: #fff;
  --tabs-bg-color: #1a1a1a;
  --tabs-active-bg-color: #111;
  --tabs-list-bg-gradient: linear-gradient(rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 80%));
  --tabs-pill-bg-color: #555;
  --tabs-pill-bg-color-hover: #666;
  --tabs-pill-bg-color-active: #444;
  --tabs-pill-text-color: #fff;
  --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.xl-spacing {
  padding: var(--spacing-xl) 0;
}

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

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

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

.tabs div[role="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);
}

.tabs div[role="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 div[role="tablist"] .tab-list-container {
  display: flex;
  width: var(--grid-container-width);
  margin: 0 auto;
  box-sizing: content-box;
}

/* center tabs */
.tabs.center > div[role="tablist"]::after,
.tabs.center > div[role="tablist"]::before {
  content: "";
  margin: auto;
}

.tabs.center div[role="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 div[role="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 .tab-paddles .paddle {
  position: absolute;
  cursor: pointer;
  width: 32px;
  height: 48px;
  bottom: 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.radio div[role="tablist"],
.tabs.radio div[role="tablist"] button,
.tabs.radio .tab-paddles .paddle {
  box-shadow: none;
  background: none;
  border: none;
}

.tabs div[role="tablist"] button:first-of-type {
  margin-left: 0;
  margin-top: 0;
}

.tabs div[role="tablist"] button:hover {
  color: var(--tabs-active-text-color);
}

.tabs div[role="tablist"] button:active {
  color: var(--tabs-active-color);
}

.tabs div[role="tablist"] button[aria-selected="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 div[role="tablist"] button {
  border-width: 0 0 2px;
  border-color: transparent;
  background: transparent;
  padding-right: 0;
  padding-left: 0;
  margin-inline-start: 24px;
}

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

.tabs[class*='pill'] div[role="tablist"] {
  box-shadow: unset;
  background: unset;
}

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

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

.tabs.radio div[role="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 div[role="tablist"] button:first-of-type,
.tabs[class*='pill'] div[role="tablist"] button:first-of-type {
  margin-inline-start: 0;
}

.tabs.quiet div[role="tablist"] button:hover {
  border-bottom-color: var(--tabs-border-hover-color);
}

.tabs.quiet div[role="tablist"] button[aria-selected="true"] {
  border-bottom-color: var(--tabs-active-color);
}

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

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

.tabs[class*='pill'] div[role="tablist"] button:focus {
  color: var(--tabs-pill-text-color);
  background: var(--tabs-pill-bg-color-hover);
}

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

.tabs[class*='pill'] div[role="tablist"] button:active {
  color: var(--tabs-pill-text-color);
  background: var(--tabs-pill-bg-color-active);
}

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

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

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

.tabs .tab-paddles {
  position: relative;
  z-index: 3;
}

.tabs .tab-paddles .paddle:disabled {
  cursor: default;
  box-shadow: none;
  background: var(--tabs-list-bg-gradient);
}

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

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

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

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

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

.tabs .tab-paddles .paddle:disabled svg {
  opacity: 0;
}

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

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

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

.tabs.radio .tab-paddles {
  display: none;
}

.tabs.radio div[role="tablist"] {
  margin-block: 0;
  margin-inline: auto;
  inline-size: var(--grid-container-width);
}

.tabs.radio div[role="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 div[role="tablist"] button:last-of-type {
  padding-inline-end: 0;
  padding-block-end: 0;
}

.tabs.radio div[role="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 div[role="tablist"] button:hover::before {
  border-color: var(--tabs-radio-blue);
}

.tabs.radio div[role="tablist"] button[aria-selected="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);
}

/* Section Metadata */
.tabs-background-transparent .tabs,
.tabs-background-transparent .tabs div[role="tablist"],
.tabs-background-transparent .tabs div[role="tablist"] button[aria-selected="true"],
.tabs-background-transparent .tabs .tab-paddles .paddle {
  background: transparent;
}

.tabs.radio.center div[role="tablist"] {
  justify-content: center;
}

.tabs.radio.right div[role="tablist"] {
  justify-content: end;
}

.dark .tabs.radio .tab-list-container::before,
.dark .tabs.radio div[role="tablist"] button {
  color: var(--color-white);
}

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

@media screen and (min-width: 600px) {
  .tabs.radio div[role="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 div[role="tablist"] button {
    white-space: normal;
    text-align: start;
  }

  .tabs.radio div[role="tablist"] button,
  .tabs.radio div[role="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 div[role="tablist"] button {
    padding: 24px 32px 18px;
    line-height: 18px;
  }

  .tabs.quiet div[role="tablist"] button {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .tabs .tab-paddles .paddle {
    height: 62px;
  }

  .tabs .tab-paddles .paddle svg {
    top: 24px;
  }
}

@media screen and (max-width: 599px) {
  .tabs.stacked-mobile div[role="tablist"] {
    margin: 0;
  }

  .tabs.stacked-mobile div[role="tablist"] .tab-list-container {
    flex-direction: column;
    margin: 30px auto;
  }

  .tabs.stacked-mobile div[role="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 div[role="tablist"] button:last-of-type {
    margin-bottom: 0;
  }

  .tabs.stacked-mobile div[role="tablist"] button[aria-selected="true"] {
    background-color: #dadada;
  }
  
  .tabs.stacked-mobile.dark div[role="tablist"] button[aria-selected="true"] {
    background-color: #393939;
  }

  .tabs.stacked-mobile.center div[role="tablist"] .tab-list-container {
    width: 100%;
    margin: 0 30px 30px;
  }

  .tabs.stacked-mobile.quiet div[role="tablist"] button {
    margin-inline-start: 0;
  }
}