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

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

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

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

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

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

/// @prop - Minimum height of the tab button
$tabs-md-tab-min-height: 56px !default;

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

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

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

/// @prop - Text color of the inactive tab button
$tabs-md-tab-text-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;

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

/// @prop - Icon color of the inactive tab button
$tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;

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

/// @prop - Padding top of the active tab button
$tabs-md-tab-padding-active-top: 0 !default;

/// @prop - Padding end of the active tab button
$tabs-md-tab-padding-active-end: $tabs-md-tab-padding-active-top !default;

/// @prop - Padding bottom of the active tab button
$tabs-md-tab-padding-active-bottom: $tabs-md-tab-padding-active-top !default;

/// @prop - Padding start of the active tab button
$tabs-md-tab-padding-active-start: $tabs-md-tab-padding-active-end !default;

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

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

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

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

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

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

/// @prop - Transform origin x for the tab button text
$tabs-md-tab-text-transform-origin-x: 50% !default;

/// @prop - Transform origin y for the tab button text
$tabs-md-tab-text-transform-origin-y: 80% !default;

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

/// @prop - Text transition for the tab button text
$tabs-md-tab-text-transition: transform 0.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
$tabs-md-tab-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
$tabs-md-tab-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
$tabs-md-tab-icon-transform-z-active: 0 !default;

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

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

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

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

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

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

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

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

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

/// @prop - Transform origin x for the tab button text
$tabs-md-tab-icon-transform-origin-x: 50% !default;

/// @prop - Transform origin y for the tab button text
$tabs-md-tab-icon-transform-origin-y: 150% !default;

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

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

.tabs-md .tabbar {
  background: $tabs-md-background;
}

// Material Design Tab Button
// --------------------------------------------------

.tabs-md .tab-button {
  min-height: $tabs-md-tab-min-height;
  font-weight: $tabs-md-tab-font-weight;
  color: $tabs-md-tab-text-color;
  
  @include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start);
}

.tabs-md .tab-button.tab-active {
  color: $tabs-md-tab-text-color-active;
  
  @include padding($tabs-md-tab-padding-active-top, $tabs-md-tab-padding-active-end, $tabs-md-tab-padding-active-bottom, $tabs-md-tab-padding-active-start);
}

// Material Design Tab Button Text
// --------------------------------------------------

.tabs-md .tab-button-text {
  font-size: $tabs-md-tab-font-size;
  text-transform: $tabs-md-tab-text-capitalization;
  transition: $tabs-md-tab-text-transition;
  
  @include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start);
  @include transform-origin($tabs-md-tab-text-transform-origin-x, $tabs-md-tab-text-transform-origin-y);
}

.tabs-md .tab-button.tab-active .tab-button-text {
  transition: $tabs-md-tab-text-transition;
  transform: $tabs-md-tab-text-transform-active;
}

.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
  @include margin(4px, null, 0, null);
}

.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
  @include margin(0, null, null, null);
}

// Material Design Tab Button Icon
// --------------------------------------------------

.tabs-md .tab-button-icon {
  min-width: $tabs-md-tab-icon-size;
  font-size: $tabs-md-tab-icon-size;
  color: $tabs-md-tab-icon-color;
  transition: $tabs-md-tab-icon-transition;
  
  @include margin(1px, null, null, null);
  @include transform-origin($tabs-md-tab-icon-transform-origin-x, $tabs-md-tab-icon-transform-origin-y);
}

// Tab layout: icon-top, icon-only, title-only
.tabs-md .tab-button.tab-active .tab-button-icon {
  color: $tabs-md-tab-icon-color-active;
  
  @include transform(translate3d($tabs-md-tab-icon-transform-x-active, $tabs-md-tab-icon-transform-y-active, $tabs-md-tab-icon-transform-z-active));
}

// Tab layout: icon-end
.tabs-md[tabsLayout=icon-end] .tab-button.tab-active .tab-button-icon {
  @include transform(translate3d($tabs-md-tab-icon-right-transform-x-active, $tabs-md-tab-icon-right-transform-y-active, $tabs-md-tab-icon-right-transform-z-active));
}

// Tab layout: icon-bottom
.tabs-md[tabsLayout=icon-bottom] .tab-button.tab-active .tab-button-icon {
  @include transform(translate3d($tabs-md-tab-icon-bottom-transform-x-active, $tabs-md-tab-icon-bottom-transform-y-active, $tabs-md-tab-icon-bottom-transform-z-active));
}

// Tab layout: icon-start
.tabs-md[tabsLayout=icon-start] .tab-button.tab-active .tab-button-icon {
  @include transform(translate3d($tabs-md-tab-icon-left-transform-x-active, $tabs-md-tab-icon-left-transform-y-active, $tabs-md-tab-icon-left-transform-z-active));
}

// Material Design Tab with Icon or Title only
// --------------------------------------------------

.tabs-md[tabsLayout=icon-hide] .tab-button,
.tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only {
  @include padding(0, 10px);
  // added
  .icon {
    line-height: inherit;
  }
}

// Material Design Tab Highlight
// --------------------------------------------------

.tabs-md[tabsHighlight=true] .tab-highlight {
  position: absolute;
  display: block;
  width: 1px; /* no */
  height: 2px; /* no */
  background: $tabs-md-tab-color-active;
  transform: translateZ(0);
  
  @include position(null, null, 0, 0);
  @include transform-origin(0, 0);
}

.tabs-md[tabsHighlight=true] .tab-highlight.animate {
  transition-duration: 300ms;
}

.tabs-md[tabsHighlight=true][tabsPlacement=bottom] > .tabbar > .tab-highlight {
  top: 0;
}

// Material Design Tabs Color Mixin
// --------------------------------------------------

@mixin tabbar-md($color-name, $color-base, $color-contrast) {
  .tabs-md-#{$color-name} .tabbar {
    background-color: $color-base;
  }
  
  .tabs-md-#{$color-name} .tab-button,
  .tabs-md-#{$color-name} .tab-button-icon {
    color: rgba($color-contrast, $tabs-md-tab-opacity);
  }
  
  .tabs-md-#{$color-name} .tab-button:hover:not(.disable-hover),
  .tabs-md-#{$color-name} .tab-button.tab-active,
  .tabs-md-#{$color-name} .tab-button.tab-active .tab-button-icon {
    color: $color-contrast;
  }
  
  .tabs-md-#{$color-name}[tabsHighlight=true] .tab-highlight {
    background: $color-contrast;
  }
  
}

// Material Design Tabbar Color Generation
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
  @include tabbar-md($color-name, $color-base, $color-contrast);
}