@import 'https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css';
@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
:root {
  font-size: 10px;
}
body {
  background-color: #f6f6f6;
  background-image: linear-gradient(90deg, rgb(221 238 246 / 0.5) 0.1rem, transparent 0.1rem), linear-gradient(180deg, rgb(221 238 246 / 0.5) 0.1rem, transparent 0.1rem);
  background-size: 0.8rem 0.8rem;
  font:
    1.6rem / 1.5 Inter,
    sans-serif;
  font-feature-settings: 'palt';
  padding: 3.2rem;
}
[role='tablist'] {
  --a: 0.4rem;
  --r1: 0.4rem;
  --r2: 0.4rem;
  display: flex;
  font-weight: bold;
  gap: 0.8rem;
  position: relative;
  text-align: center;
  &::before {
    background-color: #000;
    content: '';
    display: block;
    position: absolute;
  }
  & + * {
    background-color: #fff;
    box-shadow:
      0 0 0.2rem rgb(0 0 0 / 0.1),
      0 0.4rem 0.8rem rgb(0 0 0 / 0.2);
  }
}
[role='tab'] {
  background-color: rgb(0 0 0 / 0.2);
  display: block;
  padding: 1.6rem;
  &[aria-selected='true'] {
    background-color: #000;
    color: #fff;
  }
  &:is([aria-disabled='true'], [disabled]) {
    background-color: rgb(0 0 0 / 0.1);
    color: rgb(0 0 0 / 0.35);
  }
  &[aria-selected='false']:hover {
    background-color: rgb(0 0 0 / 0.3);
  }
  &:focus-visible {
    outline: none;
    position: relative;
    &::before {
      content: '';
      inset: 2px;
      outline: auto;
      position: absolute;
    }
  }
}
[role='tabpanel'] {
  &:not([hidden]) {
    padding: 3.2rem;
  }
}
[data-tabs]:not([data-tabs='vertical']) {
  & > [role='tablist'] {
    padding-inline: 3.2rem;
    &::before {
      height: var(--a);
      left: 0;
      right: 0;
    }
    &:has(+ div) {
      &::before {
        bottom: 0;
      }
      :where([role='tablist'] + div) & {
        margin-top: 3.2rem;
      }
    }
    div + &::before {
      top: 0;
    }
    [role='tab'] {
      border-inline: var(--r2) solid #0000;
      flex: 1;
      margin-inline: calc(-1 * var(--r2));
      [role='tablist']:has(+ div) & {
        border-top-left-radius: calc(var(--r1) + var(--r2)) var(--r1);
        border-top-right-radius: calc(var(--r1) + var(--r2)) var(--r1);
        mask:
          radial-gradient(var(--r2) at var(--r2) 0, #0000 calc(100% - 0.5px), #000 calc(100% + 0.5px)) calc(-1 * var(--r2)) calc(100% - var(--a)) / 100% var(--r2) repeat-x,
          padding-box conic-gradient(#000 0 0);
      }
      div + [role='tablist'] & {
        border-bottom-left-radius: calc(var(--r1) + var(--r2)) var(--r1);
        border-bottom-right-radius: calc(var(--r1) + var(--r2)) var(--r1);
        mask:
          radial-gradient(var(--r2) at var(--r2) 100%, #0000 calc(100% - 0.5px), #000 calc(100% + 0.5px)) calc(-1 * var(--r2)) var(--a) / 100% var(--r2) repeat-x,
          padding-box conic-gradient(#000 0 0);
      }
    }
  }
  &[data-tabs-animating] > * > [role='tabpanel'] {
    padding: 3.2rem;
  }
}
[data-tabs='vertical'] {
  display: grid;
  grid-template-areas: '. content';
  grid-template-columns: 15rem 1fr;
  [role='tabpanel'] & {
    margin-top: 3.2rem;
  }
  & > [role='tablist'] {
    align-self: center;
    flex-direction: column;
    height: 100%;
    padding-block: 3.2rem;
    &::before {
      bottom: 0;
      top: 0;
      width: var(--a);
    }
    &:has(+ div)::before {
      right: 0;
    }
    [role='tab'] {
      border-block: var(--r2) solid #0000;
      margin-block: calc(-1 * var(--r2));
      min-height: calc(2lh + 1.6rem * 2 + var(--r2) * 2);
      [role='tablist']:has(+ div) & {
        border-bottom-left-radius: var(--r1) calc(var(--r1) + var(--r2));
        border-top-left-radius: var(--r1) calc(var(--r1) + var(--r2));
        mask:
          radial-gradient(var(--r2) at 0 var(--r2), #0000 calc(100% - 0.5px), #000 calc(100% + 0.5px)) calc(100% - var(--a)) calc(-1 * var(--r2)) / var(--r2) 100% repeat-y,
          padding-box conic-gradient(#000 0 0);
      }
      div + [role='tablist'] & {
        border-bottom-right-radius: var(--r1) calc(var(--r1) + var(--r2));
        border-top-right-radius: var(--r1) calc(var(--r1) + var(--r2));
        mask:
          radial-gradient(var(--r2) at 100% var(--r2), #0000 calc(100% - 0.5px), #000 calc(100% + 0.5px)) var(--a) calc(-1 * var(--r2)) / var(--r2) 100% repeat-y,
          conic-gradient(#000 0 0) padding-box;
      }
    }
  }
  & > :where([role='tablist'] + div) {
    grid-area: content;
  }
  &[data-tabs-animating] > * > * > [role='tabpanel'] {
    padding: 3.2rem;
  }
}

/* indicator */
[data-tabs-indicator]::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
}
[data-tabs]:not([data-tabs='vertical']) > [role='tablist'] {
  [data-tabs-indicator] {
    height: var(--a);
    padding-inline: calc(0.8rem + var(--r2));
    &::before {
      background-image: linear-gradient(100deg, #0000, #66c, #c69, #f96 50%, #0000);
    }
  }
  &:has(+ div) [data-tabs-indicator] {
    bottom: 0;
  }
  div + & [data-tabs-indicator] {
    top: 0;
  }
}
[data-tabs='vertical'] > [role='tablist'] {
  [data-tabs-indicator] {
    padding-block: calc(0.8rem + var(--r2));
    width: var(--a);
    &::before {
      background-image: linear-gradient(190deg, #0000, #66c, #c69, #f96 50%, #0000);
    }
  }
  &:has(+ div) [data-tabs-indicator] {
    right: 0;
  }
  div + & [data-tabs-indicator] {
    left: 0;
  }
}