// ==========================================================================
// Monitor.Cat — Tab Navigation
// Matching persona-tab style from monitor-cat-home
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Tab container
  // ---------------------------------------------------------------------------
  .mc-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  // ---------------------------------------------------------------------------
  // Individual tab
  // ---------------------------------------------------------------------------
  .mc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    font-family: $mc-font-body;
    font-size: 0.9375rem;
    font-weight: 500;
    color: $mc-text-medium;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: $mc-radius-tab;
    cursor: pointer;
    white-space: nowrap;
    transition:
      color $mc-transition-base,
      background-color $mc-transition-base,
      border-color $mc-transition-base,
      box-shadow $mc-transition-base,
      transform $mc-transition-base;

    &:hover {
      color: $mc-text;
      background: rgba($mc-base, 0.7);
    }

    // Active state
    &.is-active {
      color: $mc-primary;
      background: $mc-white;
      border-color: $mc-border-color;
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.03);
      font-weight: 600;
    }

    &:focus-visible {
      outline: 3px solid $mc-cyan;
      outline-offset: 2px;
    }
  }

  // ---------------------------------------------------------------------------
  // Tabs with background (pill container)
  // ---------------------------------------------------------------------------
  .mc-tabs-contained {
    background: $mc-base;
    border-radius: $mc-radius-inset;
    padding: 4px;

    .mc-tab {
      border-radius: calc(#{$mc-radius-inset} - 4px);
    }
  }

  // ---------------------------------------------------------------------------
  // Tab panel (content area)
  // ---------------------------------------------------------------------------
  .mc-tab-panel {
    display: none;
    padding-top: 1.5rem;

    &.is-active {
      display: block;
    }
  }

  // ---------------------------------------------------------------------------
  // Animated panel transitions
  // ---------------------------------------------------------------------------
  .mc-tab-panel-animated {
    &.is-active {
      display: block;
      animation: mc-fade-in-up 0.4s $mc-ease-spring both;
    }
  }
}