/* Shared route tabs: intrinsic labels, rounded resting tabs, feathered sliding fill. */
.vertical-tabs {
  display: grid;
  align-content: start;
  gap: var(--keli-space-3);
}
.vertical-tabs__link {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-self: end;
  inline-size: fit-content;
  max-inline-size: 100%;
  align-items: center;
  justify-content: flex-end;
  min-inline-size: 0;
  min-block-size: var(--keli-target);
  padding: var(--keli-space-3) calc(var(--keli-tab-protrusion) + var(--keli-space-2)) var(--keli-space-3)
    var(--keli-space-4);
  color: var(--keli-on-chrome);
  font-size: var(--keli-text-source);
  text-align: right;
  text-decoration: none;
}
.vertical-tabs__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--keli-tab-radius) 0 0 var(--keli-tab-radius);
  pointer-events: none;
  z-index: -1;
}
.vertical-tabs__link--full .vertical-tabs__surface {
  inset-inline-start: calc(-1 * var(--vertical-tabs-bleed, 0px));
}
.vertical-tabs__surface::before,
.vertical-tabs__surface::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  border-radius: var(--keli-tab-radius) 0 0 var(--keli-tab-radius);
  pointer-events: none;
  z-index: -1;
}
.vertical-tabs__surface::after {
  inline-size: var(--keli-tab-protrusion);
  background: var(--keli-tab-surface);
  transition: opacity var(--keli-duration-tab) ease;
}
.vertical-tabs__surface::before {
  inline-size: calc(100% + var(--keli-tab-feather));
  background: linear-gradient(to right, transparent, var(--keli-tab-surface) var(--keli-tab-feather));
  transform: translateX(100%);
  transition: transform var(--keli-duration-tab) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vertical-tabs__link[aria-current='page'] .vertical-tabs__surface::before {
  transform: translateX(0);
}
.vertical-tabs__link[aria-current='page'] .vertical-tabs__surface::after {
  opacity: 0;
}
/* This backing sits below the adjacent view. Only its animated mask reveals it,
   so the triangle and tab have identical translucency without doubled alpha. */
.vertical-tabs__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: var(--keli-notch-depth);
  block-size: var(--keli-notch-height);
  background: var(--keli-tab-surface);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}
.vertical-tabs__label {
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px var(--keli-tab-text-shadow);
  transition: text-shadow var(--keli-duration-tab) ease;
}
.vertical-tabs__link:is(:hover, :focus-visible) .vertical-tabs__label {
  text-shadow:
    0 1px 2px var(--keli-tab-text-shadow),
    0 0 5px var(--keli-tab-hover-shadow);
}
/* Luminance masks reveal the translucent tab backing through the adjacent view. */
.vertical-tabs__mask {
  position: absolute;
  inline-size: var(--keli-notch-depth);
  block-size: var(--keli-notch-height);
  pointer-events: none;
}
[data-vertical-tabs-view] {
  mask-image: var(--vertical-tabs-mask);
  mask-mode: luminance;
}
.vertical-tabs__cutout {
  opacity: 0;
  transition: opacity var(--keli-duration-tab) ease;
}
.vertical-tabs__cutout--current {
  opacity: 1;
}
.vertical-tabs__link:focus-visible {
  outline-offset: calc(-1 * var(--keli-focus-width));
}
@media (forced-colors: active) {
  .vertical-tabs__link {
    color: LinkText;
    text-shadow: none;
  }
  .vertical-tabs__surface,
  .vertical-tabs__link::after {
    display: none;
  }
  .vertical-tabs__label,
  .vertical-tabs__link:is(:hover, :focus-visible) .vertical-tabs__label {
    text-shadow: none;
  }
  .vertical-tabs__link[aria-current='page'] {
    outline: var(--keli-border-width) solid CanvasText;
    outline-offset: calc(-1 * var(--keli-border-width));
    font-weight: 600;
  }
  [data-vertical-tabs-view] {
    mask-image: none;
  }
}