@import "./tab-button";
@import "./tab-button.ios.vars";

.tab-button-ios {
  max-width: $tab-button-ios-max-width;

  font-size: $tab-button-ios-font-size;
  color: $tab-button-ios-text-color;

  fill: $tab-button-ios-icon-color;
}

.tab-button-ios.focused {
  background: $tabbar-ios-background-color-focused;
}

.tab-button-ios .tab-cover {
  @include padding(
    $tab-button-ios-padding-top,
    $tab-button-ios-padding-end,
    $tab-button-ios-padding-bottom,
    $tab-button-ios-padding-start);
}

.enable-hover .tab-button-ios:hover,
.tab-button-ios.tab-selected {
  color: $tab-button-ios-text-color-active;

  fill: $tab-button-ios-icon-color-active;
}

.tab-button-ios .tab-button-text {
  @include margin(0, null, 1px, null);

  min-height: $tab-button-ios-font-size + 1;
}

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

.tab-button-ios .tab-button-icon {
  @include margin(4px, null, null, null);

  font-size: $tab-button-ios-icon-size;
}

.tabbar-ios .tab-button-icon::before {
  vertical-align: top;
}

.layout-icon-end .tab-button-ios .tab-button-text,
.layout-icon-start .tab-button-ios .tab-button-text,
.layout-icon-hide .tab-button-ios .tab-button-text,
.tab-button-ios.has-title-only .tab-button-text {
  @include margin(2px, 0);

  font-size: 14px;
  line-height: 1.1;
}

.layout-icon-end .tab-button-ios ion-icon,
.layout-icon-start .tab-button-ios ion-icon {
  @include margin(2px, null, 1px, null);

  min-width: 24px;
  height: 26px;

  font-size: 24px;
}

.layout-title-hide .tab-button-ios ion-icon {
  @include margin(0);
}