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

:host {
  --padding-top: #{$tab-button-ios-padding-top};
  --padding-end: #{$tab-button-ios-padding-end};
  --padding-bottom: #{$tab-button-ios-padding-bottom};
  --padding-start: #{$tab-button-ios-padding-start};

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

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

// iOS Tab Button: Badge
// --------------------------------------------------

::slotted(ion-badge:not([vertical])) {
  @include padding(1px, 6px);
  @include position(4px, null, null, calc(50% + 6px));

  height: auto;

  font-size: 12px;

  line-height: 16px;
}

:host ::slotted(ion-badge:empty) {
  @include padding(0, 0);

  width: $tab-ios-button-badge-size-emtpy;
  height: $tab-ios-button-badge-size-emtpy;
}

:host ::slotted(ion-badge[vertical]) {
  @include position(null, null, null, $tab-ios-button-badge-start-position);
}

:host ::slotted(ion-badge.badge-vertical-top) {
  @include position($tab-ios-button-badge-top-position);
}

:host ::slotted(ion-badge.badge-vertical-top:empty) {
  @include position($tab-ios-button-badge-top-position-empty);
}

:host ::slotted(ion-badge.badge-vertical-bottom) {
  @include position($tab-ios-button-badge-bottom-position);
}

:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
  @include position($tab-ios-button-badge-bottom-position-empty);
}

:host ::slotted(ion-badge[vertical]:not(:empty)) {
  @include padding(
    $tab-ios-button-badge-padding-top,
    $tab-ios-button-badge-padding-end,
    $tab-ios-button-badge-padding-bottom,
    $tab-ios-button-badge-padding-start
  );

  display: flex;

  align-items: center;
  justify-content: center;

  min-width: $tab-ios-button-badge-size;
  height: $tab-ios-button-badge-size;

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

:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
  @include position($tab-ios-button-icon-bottom-badge-top-position);
}

:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
  @include position($tab-ios-button-icon-bottom-badge-bottom-position);
}

:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
  @include position($tab-ios-button-icon-bottom-badge-bottom-position-empty);
}

// iOS Tab Button: Icon
// --------------------------------------------------

::slotted(ion-icon) {
  @include margin(2px, null, 2px, null);

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

::slotted(ion-icon::before) {
  vertical-align: top;
}

// iOS Tab Button: Label
// --------------------------------------------------

::slotted(ion-label) {
  @include margin(0, null, 1px, null);

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

  font-weight: 500;
}

// iOS Tab Button Label Only
// --------------------------------------------------

:host(.tab-has-label-only) ::slotted(ion-label) {
  @include margin(2px, 0);

  font-size: $tab-button-ios-font-size + 2;
  font-size: 14px;

  line-height: 1.1;
}

// iOS Tab Button Layout
// --------------------------------------------------

:host(.tab-layout-icon-end) ::slotted(ion-label),
:host(.tab-layout-icon-start) ::slotted(ion-label),
:host(.tab-layout-icon-hide) ::slotted(ion-label) {
  margin-top: 2px;
  margin-bottom: 2px;

  font-size: 14px;

  line-height: 1.1;
}

:host(.tab-layout-icon-end) ::slotted(ion-icon),
:host(.tab-layout-icon-start) ::slotted(ion-icon) {
  min-width: 24px;
  height: 26px;

  margin-top: 2px;
  margin-bottom: 1px;

  font-size: 24px;
}

// iOS Tab Button: Icon Bottom Layout
// --------------------------------------------------

// Badge
:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
  @include position(null, null, null, calc(50% + 12px));
}

// Icon
:host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
  @include margin(0, null, 1px, null);
}

// Label
:host(.tab-layout-icon-bottom) ::slotted(ion-label) {
  @include margin(4px);
}

// iOS Tab Button: Icon Start / End Layout
// --------------------------------------------------

:host(.tab-layout-icon-start) ::slotted(ion-badge),
:host(.tab-layout-icon-end) ::slotted(ion-badge) {
  @include position(10px, null, null, calc(50% + 35px));
}

// iOS Tab Button: Icon Hide / Label Only Layout
// --------------------------------------------------------------

// Badge
:host(.tab-layout-icon-hide) ::slotted(ion-badge),
:host(.tab-has-label-only) ::slotted(ion-badge) {
  @include position(10px, null, null, calc(50% + 30px));
}

// iOS Tab Button: Icon Only / Label Hide Layout
// --------------------------------------------------------------

// Badge
:host(.tab-layout-label-hide) ::slotted(ion-badge),
:host(.tab-has-icon-only) ::slotted(ion-badge) {
  @include position(10px);
}

// Icon
:host(.tab-layout-label-hide) ::slotted(ion-icon) {
  @include margin(0);
}

:host(.tab-layout-label-hide) ::slotted(ion-icon),
:host(.tab-has-icon-only) ::slotted(ion-icon) {
  font-size: $tab-button-ios-icon-only-size;
}