@charset "UTF-8";
/* Tweak as you like — these are your “styling API” vars */
:root {
  --tabs-fade-duration: .5s;
  --tabs-fade-ease: ease;
}

.mw-tabs [hidden] {
  display: none !important;
}

/* Buttons (keep your look & feel) */
.mw-tabs--buttons.mw-tabs {
  display: flex;
  gap: 10px;
}
.mw-tabs--buttons.mw-tabs .mw-tabs__tab {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
}
.mw-tabs--buttons.mw-tabs .mw-tabs__tab.is-active, .mw-tabs--buttons.mw-tabs .mw-tabs__tab.mw-tabs__tab--active {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ===== Tabs: Content crossfade (no outside overlap) ===== */
:root {
  --tabs-fade-duration: .5s;
  --tabs-fade-ease: ease;
}

.mw-tabs [hidden] {
  display: none !important;
}

.mw-tabs--content {
  position: relative;
  /* Panels live in normal flow by default, so the container keeps height */
  /* The old (exiting) panel sits on top while fading out, but doesn't affect layout */
  /* The new (entering/visible) panel is in flow and interactive */
  /* Optional height tween mode (if you enabled data-manage-height="true") */
}
.mw-tabs--content > .mw-tabs__panel {
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tabs-fade-duration, 0.5s) var(--tabs-fade-ease, ease);
  will-change: opacity;
  z-index: 0;
}
.mw-tabs--content > .mw-tabs__panel.is-exiting {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.mw-tabs--content > .mw-tabs__panel.is-visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.mw-tabs--content[data-manage-height=true] {
  overflow: hidden;
  height: var(--tabs-target-height, auto);
  transition: height var(--tabs-fade-duration, 0.5s) var(--tabs-fade-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  .mw-tabs--content,
  .mw-tabs--content > .mw-tabs__panel {
    transition: none !important;
  }
}
/*
// Tabs 

// BUTTONS 

.mw-tabs--buttons.mw-tabs {
    display: flex;
    gap: 10px;
    button.mw-tabs__tab {
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        &.is-active {
            box-shadow: inset 0px 0px 8px rgba(0,0,0,0.2);
        }
    }
}


// CONTENT

.mw-tabs--content {
    position: relative;
    .mw-tabs__content-interior {
        position: relative;
    }
    .is-active {
        opacity: 1;
    }
    & > :not(.is-active) {
        opacity: 0;
    }
}
.mw-tabs {
    .is-entering, .is-exiting {
        transition: .5s ease;
    }
}*//*# sourceMappingURL=tabs.css.map */