/**
 * @file
 * Tabs (toggle pill) — SDC-12 shell only.
 *
 * Panel content comes from Canvas slots (panel_1, panel_2).
 *
 * Desktop Toggle Nav v2: 29097:64441 — 794px pill, 2px dark-coral border.
 * Desktop toggle-to-panel gap: 29097:64438 — 32px.
 * Mobile Toggle Nav v2: 28829:32107 — full-width pill, 16px labels.
 * Mobile toggle-to-panel gap: 28829:32105 — 24px.
 */

.layout-container {

  .tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
  }

  .tabs__list {
    display: flex;
    align-items: center;
    width: 794px;
    max-width: 100%;
    margin-inline: auto;
    border: 2px solid var(--color-dark-coral);
    border-radius: var(--radius-full);
    background: var(--color-white);
    overflow: hidden;
  }

  .tabs__tab {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 13px 24px 11px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-dark-coral);
    font-family: var(--font-agenda);
    font-size: var(--fs-20);
    font-weight: var(--font-weight-bold);
    font-feature-settings: "liga" 0;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .tabs__tab:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-outer);
    outline-offset: var(--focus-ring-width);
  }

  .tabs__tab-label {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: nowrap;
  }

  .tabs__tab--selected {
    background: var(--color-dark-coral);
    color: var(--color-white);
  }

  .tabs__panel {
    width: 100%;
  }

  .tabs__panel--hidden {
    display: none;
  }

  body.path-canvas .tabs__panel--hidden {
    display: block;
  }

  .tabs__panel-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    width: 100%;
  }

  @media (max-width: 767px) {

    .tabs {
      align-items: stretch;
      gap: var(--space-lg);
    }

    .tabs__list {
      align-items: stretch;
      width: 100%;
    }

    .tabs__tab {
      align-self: stretch;
      padding: 13px 16px 10px;
      font-size: var(--fs-16);
    }

    .tabs__tab--selected {
      padding: 10px 16px;
    }

    .tabs__tab-label {
      flex: 1 0 0;
      min-width: 0;
      line-height: 16px;
      text-align: center;
      white-space: normal;
    }

  }

}