@import "../../themes/ionic.globals.md";

// Material Design Tabs
// --------------------------------------------------

/// @prop - Padding top on the tab button
$tab-button-md-padding-top:                     8px !default;

/// @prop - Padding end on the tab button
$tab-button-md-padding-end:                     12px !default;

/// @prop - Padding bottom on the tab button
$tab-button-md-padding-bottom:                  10px !default;

/// @prop - Padding start on the tab button
$tab-button-md-padding-start:                   12px, !default;

/// @prop - Font size of the inactive tab button text
$tab-button-md-font-size:                       12px !default;

/// @prop - Font weight of the tab button text
$tab-button-md-font-weight:                     normal !default;

/// @prop - Text color of the inactive tab button
$tab-button-md-text-color:                      $tabbar-md-text-color !default;

/// @prop - Text color of the active tab button
$tab-button-md-text-color-active:               $tabbar-md-text-color-active !default;

/// @prop - Icon color of the inactive tab button
$tab-button-md-icon-color:                      $tabbar-md-text-color !default;

/// @prop - Icon color of the active tab button
$tab-button-md-icon-color-active:               $tabbar-md-text-color-active !default;

/// @prop - Font size of the active tab button text
$tab-button-md-font-size-active:                14px !default;

/// @prop - Margin top on the tab button text
$tab-button-md-text-margin-top:                 0 !default;

/// @prop - Margin end on the tab button text
$tab-button-md-text-margin-end:                 $tab-button-md-text-margin-top !default;

/// @prop - Margin bottom on the tab button text
$tab-button-md-text-margin-bottom:              $tab-button-md-text-margin-top !default;

/// @prop - Margin start on the tab button text
$tab-button-md-text-margin-start:               $tab-button-md-text-margin-end !default;

/// @prop - Capitalization of the tab button text
$tab-button-md-text-capitalization:             none !default;

/// @prop - Transform for the active tab button text
$tab-button-md-text-transform-active:           scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default;

/// @prop - Text transition for the tab button text
$tab-button-md-text-transition:                 transform .3s ease-in-out !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only
$tab-button-md-icon-transform-x-active:         0 !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only
$tab-button-md-icon-transform-y-active:         -2px !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only
$tab-button-md-icon-transform-z-active:         0 !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-x-active:   2px !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-y-active:   0 !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-z-active:   0 !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-x-active:  0 !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-y-active:  2px !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-z-active:  0 !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-x-active:    -2px !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-y-active:    0 !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-z-active:    0 !default;

/// @prop - Text transition for the tab button icon
$tab-button-md-icon-transition:                 transform .3s ease-in-out !default;

/// @prop - Size of the tab button icon
$tab-button-md-icon-size:                       24px !default;

/// @prop - Opacity of the inactive tab button
$tab-button-md-opacity:                         .7 !default;
