// Tabs Customizations (Strict Separation from Navs)

// Using SDGA Variables directly
// #161616 -> $black
// #384250 -> $gray-700
// #9DA4AE -> $gray-400
// #F3F4F6 -> $gray-100
// #E5E7EB -> $gray-200
// #D2D6DB -> $gray-300
// #1B8354 -> $sa-600 (Selection indicator color from samples)
// Radius: 4px -> $radius-sm

$nav-tabs-border-color: $gray-300;
$nav-link-color: $gray-700;
$nav-link-hover-bg: $gray-100;
$nav-link-active-color: $black;
$nav-link-disabled-color: $gray-400;
$nav-link-pressed-bg: $gray-200;
$nav-link-selection-indicator: $sa-600; // Green from samples
$nav-link-selection-indicator-default: $black; // Green from samples

// Spacing Variables mapped from HTML static values
// 52px = 3.25rem (Custom) or close to spacer 8 (48px) - keeping calculation
$tab-height-lg: 3.25rem;
$tab-height-md: 2.75rem; // 44px
$tab-height-sm: 2.25rem; // 36px

$tab-v-height-lg: map-get($spacers, 7); // 40px
$tab-v-height-md: map-get($spacers, 6); // 32px
$tab-v-height-sm: map-get($spacers, 5); // 24px

.nav {
  padding: 0;
}

// Sizes Mixin (Helper for Horizontal)
@mixin nav-size($height, $padding-y, $padding-x, $font-size) {
  .nav-link {
    height: $height !important;
    padding: $padding-y $padding-x !important;
    font-size: $font-size;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: map-get($spacers, 1); // 4px
  }
}

// ============================================
// MIXINS DEFINITION
// ============================================

@mixin tabs-horizontal {
  --#{$prefix}nav-tabs-border-width: 0;
  --#{$prefix}nav-tabs-border-radius: 0;
  --#{$prefix}nav-tabs-link-active-bg: transparent;

  position: relative; // Establish positioning context
  border-bottom: 3px solid transparent; // Maintain space but make transparent
  border-right: 0; // Reset vertical
  gap: map-get($spacers, 2); // 8px

  // Rounded bottom border line
  &::before {
    content: '';
    display: block; // Ensure it's visible (reset display:none from vertical)
    position: absolute;
    left: 0;
    bottom: -3px; // Align with the transparent border
    width: 100%;
    height: 3px;
    background-color: $nav-tabs-border-color;
    border-radius: $radius-full; // Rounded ends
    pointer-events: none; // Prevent interference with clicks/hover
  }

  .nav-link {
    font-family: $font-family-base;
    font-weight: $font-weight-base; // 400
    color: $nav-link-color;
    border: none;
    border-radius: $radius-sm;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: map-get($spacers, 1); // 4px gap between icon and text (from sample)
    
    // Reset vertical specific
    width: auto; 
    justify-content: center;
    margin-bottom: 0;

    // Hover State & Pseudo-Hover (exclude active tabs)
    &:hover:not(.disabled):not(.active),
    &.pseudo-hover:not(.active) {
      background-color: $nav-link-hover-bg;
      color: $nav-link-color;
    }

    // Pressed State & Pseudo-Active (exclude active tabs)
    &:active:not(.disabled):not(.active),
    &.pseudo-active:not(.active) {
      background-color: $nav-link-pressed-bg;
    }

    // Active State
    &.active {
      color: $nav-link-active-color;
      font-weight: $font-weight-bold; // 700
      background-color: transparent;
    }

    // Disabled State
    &.disabled {
      color: $nav-link-disabled-color;
      background-color: transparent;
      pointer-events: none;
      cursor: not-allowed;
    }

    // Active indicator as ::before pseudo-element (bottom underline)
    &::before {
      content: '';
      position: absolute;
      inset-inline-start: map-get($spacers, 4); // 16px from start
      inset-inline-end: map-get($spacers, 4); // 16px from end
      bottom: 0;
      top: auto; // Reset vertical
      width: auto; // Reset vertical
      height: 3px;
      background-color: transparent; 
      border-radius: $radius-full; // Rounded ends
      z-index: 1; // Ensure it sits on top of the border
      transition: background-color 0.2s ease; // Smooth transition
      margin-bottom: -2.75px;
    }

    // Flush variant (no left/right gap for indicator)
    // Using @at-root to break out of .nav-link nesting but keep context if needed, 
    // actually inside mixin standard nesting works best.
    // However, flush needs to target the generic parent .flush class. 
    // Since we are inside .nav-tabs context when including, & refers to .nav-tabs
    // We need to check if parent has flush. 
    // Simpler: Just rely on the fact that standard BS navs work.
    // The original code used @at-root .nav-tabs.flush .nav-link...
  }
  
  // Flush handling needs to be careful about not breaking when inside responsive classes
  &.flush .nav-link::before {
      inset-inline-start: 0;
      inset-inline-end: 0;
  }

  // Links styling (Continued)
  .nav-link {
    &.active::before {
        background-color: $nav-link-selection-indicator; // #1B8354 green
    }

    // Hover & Pressed state for non-active
    &:hover:not(.active):not(.disabled)::before,
    &.pseudo-hover:not(.active):not(.disabled)::before,
    &:active:not(.active):not(.disabled)::before,
    &.pseudo-active:not(.active):not(.disabled)::before {
        background-color: $nav-link-selection-indicator-default;
    }

    // If disabled AND active, show gray indicator
    &.disabled.active::before {
        background-color: $nav-link-disabled-color; 
    }
  }

  // Sizes logic embedded
  &.nav-lg {
    @include nav-size($tab-height-lg, map-get($spacers, 4), map-get($spacers, 4), $font-size-sm);
  }

  &.nav-md {
    @include nav-size($tab-height-md, map-get($spacers, 3), map-get($spacers, 4), $font-size-sm);
  }

  &.nav-sm {
    @include nav-size($tab-height-sm, map-get($spacers, 2), map-get($spacers, 3), $font-size-sm);
  }
}

@mixin tabs-vertical {
  border-bottom: 0;
  border-right: 0;
  gap: 0;
  
  &::before {
    display: none; // Hide the rounded horizontal border
  }

  .nav-link {
    width: 100%;
    justify-content: flex-start;
    border: none; 
    border-bottom: none;
    border-radius: $radius-sm;
    margin-bottom: map-get($spacers, 1); // 4px
    font-weight: $font-weight-base; 
    color: $nav-link-color; 
    position: relative; 
    display: flex;
    align-items: center; 
    gap: map-get($spacers, 2); 

    // Enable indicator rendering but keep transparent by default
    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 0; // Logical property for LTR left / RTL right
      inset-inline-end: auto; // Reset horizontal
      top: map-get($spacers, 1); // 4px from top
      bottom: map-get($spacers, 1); // 4px from bottom
      width: 3px;
      height: auto; // Reset horizontal
      background-color: transparent; 
      border-radius: $radius-full; 
      transition: background-color 0.2s ease;
      margin-bottom: 0; // Reset horizontal
    }

    // Icons
    i, img, svg {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    &:focus, &:focus-visible {
      outline: none;
      border: none;
    }

    // Hover State
    &:hover:not(.disabled):not(.active),
    &.pseudo-hover:not(.active) {
      background-color: $nav-link-hover-bg; 
      color: $nav-link-color; 

      &::before {
        background-color: $nav-link-selection-indicator-default;
      }
    }

    // Pressed State
    &:active:not(.disabled):not(.active),
    &.pseudo-active:not(.active) {
      background-color: $nav-link-pressed-bg; 
      color: $black;

      &::before {
        background-color: $nav-link-selection-indicator-default;
      }
    }

    // Selected/Active State
    &.active {
      background-color: transparent;
      color: $nav-link-active-color; 
      font-weight: $font-weight-semibold; // 600
      position: relative;

      &::before {
        background-color: $nav-link-selection-indicator; 
      }

      // When selected tab is hovered
      &:hover:not(.disabled),
      &.pseudo-hover {
        background-color: transparent; 
      }

      // When selected tab is pressed
      &:active:not(.disabled),
      &.pseudo-active {
        background-color: transparent; 
      }
    }

    // Disabled State
    &.disabled, &:disabled {
      color: $nav-link-disabled-color; 
      background-color: transparent !important; 
      pointer-events: none;
      cursor: not-allowed;

      &.active::before {
        background-color: $nav-link-disabled-color; 
      }

      &:not(.active)::before {
        background-color: transparent;
      }
    }
  }

  // Size Variants - matches samples for large/medium/small
  &.nav-lg {
    .nav-link {
        height: auto !important; // Reset nav-size mixin if previously applied
        min-height: $tab-v-height-lg; // 40px
        padding: map-get($spacers, 2) map-get($spacers, 2) !important; 
        font-size: $font-size-base; 

      &.active {
        font-weight: $font-weight-semibold; 
      }
    }
  }

  &.nav-md {
    .nav-link {
        height: auto !important;
        min-height: $tab-v-height-md; // 32px
        padding: map-get($spacing-tokens, 'spacing-sm') map-get($spacers, 2) !important;
        font-size: $font-size-sm; 

      &.active {
        font-weight: $font-weight-semibold; 
      }
    }
  }

  &.nav-sm {
    .nav-link {
        height: auto !important;
        min-height: $tab-v-height-sm; // 24px
        padding: map-get($spacing-tokens, 'spacing-xxs') map-get($spacing-tokens, 'spacing-sm') !important;
        font-size: $font-size-sm; 

      &.active {
        font-weight: $font-weight-medium; 
      }
    }
  }
}

// ============================================
// APPLY STYLES
// ============================================

.nav-tabs {
  @include tabs-horizontal;
}

.nav-tabs.flex-column {
  @include tabs-vertical;
}

// Responsive Loops
// Iterate over breakpoints to generate classes like .flex-md-row, .flex-lg-column
@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        // If class is flex-*-row, use horizontal tabs
        .nav-tabs.flex#{$infix}-row {
            @include tabs-horizontal;
        }

        // If class is flex-*-column, use vertical tabs
        .nav-tabs.flex#{$infix}-column {
            @include tabs-vertical;
        }
    }
}