/**
 * @module tabs
 * @description Simple, mobile-friendly tabs
 */

/**
 * Primary tabs component
 * Handles tab controls, content visibility, and mobile presentation states
 *
 * @selector .fs-tabs
 * @modifier .fs-tabs-enabled - Applied when tabs are enabled
 * @modifier .fs-tabs-active - Applied when a tab/content pair is active
 * @modifier .fs-tabs-mobile - Applied when mobile tab mode is active
 */
.fs-tabs {

  /**
   * Enabled state styles for desktop and mobile tab controls
   * @selector .fs-tabs-tab.fs-tabs-enabled
   * @selector .fs-tabs-tab_mobile.fs-tabs-enabled
   */
  &-tab&-enabled,
  &-tab_mobile&-enabled {
    box-sizing: border-box;
    cursor: pointer;
  }

  /**
   * Enabled state styles for tab content panels
   * @selector .fs-tabs-content.fs-tabs-enabled
   */
  &-content&-enabled {
    box-sizing: border-box;
    display: none;
  }

  /**
   * Active state for visible tab content panel
   * @selector .fs-tabs-content.fs-tabs-active
   */
  &-content&-active {
    display: block;
  }

  //

  /**
   * Mobile-specific appearance reset for generated mobile tab button
   * @selector .fs-tabs-tab_mobile.fs-tabs-mobile
   */
  &-tab_mobile&-mobile {
    appearance: none;
  }

  /**
   * Hidden state for desktop tabs and inactive mobile controls in mobile mode
   * @selector .fs-tabs-tab.fs-tabs-mobile
   * @selector .fs-tabs-tab_mobile
   * @selector .fs-tabs-tab_mobile.fs-tabs-active
   */
  &-tab&-mobile,
  &-tab_mobile,
  &-tab_mobile&-active {
    display: none;
  }

  /**
   * Visible state for mobile tab controls in mobile mode
   * @selector .fs-tabs-tab_mobile.fs-tabs-mobile
   * @selector .fs-tabs-tab_mobile.fs-tabs-mobile.fs-tabs-active
   */
  &-tab_mobile&-mobile,
  &-tab_mobile&-mobile&-active {
    display: block;
  }
}