////
/// @group tabs
////

@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/functions';

/// The default height for a tab.
/// @type Number
$rmd-tab-height: 3rem !default;

/// The default height for a tab that has stacked text with an icon.
/// @type Number
$rmd-tab-stacked-height: 4.5rem !default;

/// The amount of padding to apply to the left and right of the tab's content
/// @type Number
$rmd-tab-horizontal-padding: 1rem !default;

/// The amount of padding to apply to the top and bottom of the tab's content
/// @type Number
$rmd-tab-vertical-padding: 0.75rem !default;

/// The minimum width for a tab. The way tabs work is that they will grow as needed
/// to fill the entire space of the `Tabs` container width. This also means that
/// they will shrink if the `Tabs` container is small.
/// @type Number
$rmd-tab-min-width: 5.625rem !default;

/// The maximum width for a tab. The way tabs work is that they will grow as needed
/// to fill the entire space of the `Tabs` container width. This also means that
/// they will shrink if the `Tabs` container is small.
/// @type Number
$rmd-tab-max-width: 20rem !default;

/// The tab indicator color to use.
///
/// @require rmd-theme-var
/// @type Color|String
$rmd-tab-indicator-color: rmd-theme-var(primary) !default;

/// The color to use when a tab has become active.
///
/// @require rmd-theme
/// @type Color|String
$rmd-tab-active-color: rmd-theme(text-primary-on-background) !default;

/// The color to use when a tab is inactive.
///
/// @require rmd-theme
/// @type Color|String
$rmd-tab-inactive-color: rmd-theme(text-secondary-on-background) !default;

/// The color to use when a tab is disabled.
///
/// @require rmd-theme
/// @type Color|String
$rmd-tab-disabled-color: rmd-theme(text-disabled-on-background) !default;

/// The height for the active tab indicator divider.
/// @type Number
$rmd-tab-active-indicator-height: 0.125rem !default;

/// A list of alignments that should be supported by the Tabs component. These
/// values should be valid values for the `justify-content` property.
/// @type List
$rmd-tabs-positions: (left center right) !default;

/// The amount of padding to use when the `scrollable` prop is enabled on the
/// `Tabs` component that will be added to the left of the first tab (or right
/// for RTL languages). This padding is useful to help users know that the
/// content is scrollable.
/// @type Number
$rmd-tabs-scrollable-padding: 3.25rem !default;

/// A map of all the themeable parts of the tabs package.
/// @type Map
$rmd-tabs-theme-values: (
  active: $rmd-tab-active-color,
  inactive: $rmd-tab-inactive-color,
  disabled: $rmd-tab-disabled-color,
  indicator-color: $rmd-tab-indicator-color,
) !default;