// framework/_tabs.sass

@use '../abstracts' as *
@use 'sass:color'  // For color.adjust()—non-deprecated color tweaks

// Simplified tab styling: Square borders, no rounds
.tab-container
  margin: space('lg') auto
  background: $bg-dark

.tab-nav
  display: flex
  background-color: $bg-darker
  border-bottom: 1px solid $border-light

.tab-button
  padding: space('sm') space('md')
  background: $bg-darker
  border: 1px solid $border-light
  border-bottom: none
  cursor: pointer
  font-size: 14px
  min-width: 120px  // Makes them more square/equal
  text-align: center
  color: $text-light
  font-family: $mono-font  // From vars

  &:hover
    background-color: color.adjust($bg-darker, $lightness: 5%)  // Modern, non-deprecated lighten equivalent

  + .tab-button
    border-left: none  // Shared borders

  &.active
    background-color: $bg-dark
    border-bottom: 2px solid $accent-light
    color: $accent-light
    font-weight: bold

.tab-content
  display: none
  padding: space('lg')
  background-color: $bg-dark
  color: $text-light
  border: none

  &.active
    display: block