/* PicPac Design System 2.0.4. Import tokens.css first. */
.pp-pack-tabs {
  position: relative;
  z-index: var(--pp-pack-tab-layer-even);
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding-inline: var(--pp-pack-tabs-row-padding);
  scroll-padding-inline: var(--pp-pack-tabs-row-padding);
  scrollbar-width: none;
  isolation: isolate;
}

.pp-pack-tabs::-webkit-scrollbar {
  display: none;
}

.pp-pack-tabs::before {
  content: "";
  position: absolute;
  z-index: var(--pp-pack-tab-layer-focus);
  inset: 0 0 auto;
  height: var(--pp-pack-tab-seam);
  pointer-events: none;
  background: var(--pp-pack-tabs-active-fill);
}

.pp-pack-tab {
  position: relative;
  z-index: var(--pp-pack-tab-layer-even);
  display: inline-flex;
  min-height: var(--pp-pack-tab-target-min);
  flex: none;
  align-items: flex-start;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.pp-pack-tab + .pp-pack-tab {
  margin-inline-start: calc(-1 * var(--pp-pack-tab-overlap));
}

.pp-pack-tab:nth-of-type(even) {
  z-index: var(--pp-pack-tab-layer-odd);
}

.pp-pack-tab[aria-selected="true"] {
  z-index: var(--pp-pack-tab-layer-active);
}

.pp-pack-tab:focus-visible {
  z-index: var(--pp-pack-tab-layer-focus);
  outline: var(--pp-focus-width) solid currentColor;
  outline-offset: calc(-1 * var(--pp-focus-width));
}

.pp-pack-tab-face {
  position: relative;
  display: inline-flex;
  min-height: var(--pp-pack-tab-face-min);
  align-items: center;
  justify-content: center;
  padding-inline: var(--pp-pack-tab-label-space);
  background: transparent;
  isolation: isolate;
  filter: drop-shadow(var(--pp-pack-tab-shadow-idle));
}

.pp-pack-tab[aria-selected="true"] .pp-pack-tab-face {
  filter: drop-shadow(var(--pp-pack-tab-shadow-active));
}

.pp-pack-tab-face::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--pp-pack-tab-shoulder));
  z-index: -1;
  background: var(--pp-pack-tab-fill);
  clip-path: var(
    --pp-pack-tab-path,
    polygon(0 0, 100% 0, calc(100% - var(--pp-pack-tab-shoulder)) var(--pp-pack-tab-shoulder), calc(100% - var(--pp-pack-tab-shoulder)) 100%, var(--pp-pack-tab-shoulder) 100%, var(--pp-pack-tab-shoulder) var(--pp-pack-tab-shoulder))
  );
}

.pp-pack-tab-label {
  position: relative;
  font-size: var(--pp-pack-tab-label-size);
  line-height: var(--pp-pack-tab-label-lh);
  font-weight: var(--pp-pack-tab-weight);
  white-space: nowrap;
}

.pp-pack-tab[aria-selected="true"] .pp-pack-tab-label {
  font-weight: var(--pp-pack-tab-active-weight);
}

@media (forced-colors: active) {
  .pp-pack-tabs::before,
  .pp-pack-tab-face::before {
    background: Canvas;
    border: 1px solid CanvasText;
  }
}