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

// Windows Tabs
// --------------------------------------------------

/// @prop - Padding top on the tab button
$tabs-wp-tab-padding-top: 12px !default;

/// @prop - Padding end on the tab button
$tabs-wp-tab-padding-end: 10px !default;

/// @prop - Padding bottom on the tab button
$tabs-wp-tab-padding-bottom: 5px !default;

/// @prop - Padding start on the tab button
$tabs-wp-tab-padding-start: 10px !default;

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

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

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

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

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

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

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

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

/// @prop - Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-wp-tab-border: 2px solid $tabs-wp-border-color !default;

/// @prop - Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-wp-tab-border-color-active: $tabs-wp-tab-color-active !default;

/// @prop - Background of the tab button when pressed
$tabs-wp-tab-background-activated: rgba(0, 0, 0, 0.1) !default;

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

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

.tabs-wp .tab-button {
  min-height: $tabs-wp-tab-min-height;
  font-size: $tabs-wp-tab-font-size;
  font-weight: $tabs-wp-tab-font-weight;
  color: $tabs-wp-tab-color;
  border-bottom: $tabs-wp-tab-border;
  box-shadow: none;
  
  @include border-radius(0);
  @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start);
}

.tabs-wp .tab-button[aria-selected=true] {
  color: $tabs-wp-tab-color-active;
  border-bottom-color: $tabs-wp-tab-border-color-active;
}

.tabs-wp .tab-button:active {
  background: $tabs-wp-tab-background-activated;
}

.tabs-wp[tabsPlacement=bottom] .tab-button {
  border-top: $tabs-wp-tab-border;
  border-bottom-width: 0;
}

.tabs-wp[tabsPlacement=bottom] .tab-button[aria-selected=true] {
  border-top-color: $tabs-wp-tab-border-color-active;
}

// Windows Tab Button Text
// --------------------------------------------------

.tabs-wp .tab-button-text {
  @include margin(5px, null);
}

// Windows Tab Button Icon
// --------------------------------------------------

.tabs-wp .tab-button-icon {
  min-width: $tabs-wp-tab-icon-size;
  font-size: $tabs-wp-tab-icon-size;
  color: $tabs-wp-tab-icon-color;
}

.tabs-wp .tab-button[aria-selected=true] .tab-button-icon {
  color: $tabs-wp-tab-icon-color-active;
}

.tabs-wp[tabsLayout=icon-bottom] .tab-button {
  @include padding(8px, null, 8px, null);
}

.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-end] .tab-button,
.tabs-wp[tabsLayout=icon-start] .tab-button {
  @include padding(null, null, 10px, null);
}

.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-end] .tab-button ion-icon,
.tabs-wp[tabsLayout=icon-start] .tab-button ion-icon {
  min-width: 24px;
}

.tabs-wp[tabsLayout=icon-hide] .tab-button,
.tabs-wp[tabsLayout=title-hide] .tab-button,
.tabs-wp .tab-button.icon-only,
.tabs-wp .tab-button.has-title-only {
  @include padding(6px, 10px);
}

// Windows Tabbar Color Mixin
// --------------------------------------------------

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

// Windows Tabbar Color Generation
// --------------------------------------------------

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