@import "../../../ionic.globals";
@import "../tabs";

// iOS Tabs
// --------------------------------------------------

$tabbar-ios-item-padding:             0px 10px !default;
$tabbar-ios-item-font-size:           10px !default;
$tabbar-ios-item-icon-size:           32px !default;
$tabbar-ios-height:                   49px !default;


tabbar {
  border-top: 1px solid $toolbar-ios-border-color;
}

ion-tabs[tabbar-placement=top] tabbar {
  border-top: none;
  border-bottom: 1px solid $toolbar-ios-border-color;
}

.tab-button {
  padding: $tabbar-ios-item-padding;
  min-height: $tabbar-ios-height;
}

.tab-button-text {
  margin-bottom: 0;
  min-height: $tabbar-ios-item-font-size + 1;
  font-size: $tabbar-ios-item-font-size;
}

.has-title-only .tab-button-text {
  font-size: $tabbar-ios-item-font-size + 2;
}

.tab-button-icon {
  font-size: $tabbar-ios-item-icon-size;
  height: $tabbar-ios-item-icon-size;
  min-width: $tabbar-ios-item-icon-size + 5;

  &:before {
    vertical-align: top;
  }
}

[tabbar-icons=right] .tab-button,
[tabbar-icons=left] .tab-button {

  .tab-button-text {
    font-size: 1.4rem;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 0;
  }

  icon {
    min-width: 24px;
    height: 26px;
    font-size: 24px;
  }
}

[tabbar-icons=hide] .tab-button-text {
  font-size: 1.4rem;
  line-height: 1.1;
}

.tab-button.has-title-only {
  min-height: $tabbar-ios-height - 8;

  .tab-button-text {
    font-size: 1.4rem;
    line-height: 1.1;
  }
}

.tab-button.icon-only {
  min-height: $tabbar-ios-height - 8;
}

&.hairlines ion-tabs {

  tabbar {
    border-top-width: 0.55px;
  }

  &[tabbar-placement="top"] tabbar {
    border-bottom-width: 0.55px;
  }

}

@each $color-name, $color-value in $colors {

  tabbar[#{$color-name}] {
    border-color: darken($color-value, 10%);
  }

}