@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./tab-button.common";

// Ionic Tab Button
// --------------------------------------------------------------

:host {
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-radius-025};

  @include globals.typography(globals.$ion-body-action-xs);

  position: relative;

  align-content: center;

  min-width: globals.$ion-scale-1200;

  min-height: globals.$ion-scale-1200;
  max-height: globals.$ion-scale-1800;
}

// Tab Button: Native
// --------------------------------------------------

.button-native {
  @include globals.border-radius(inherit);
  @include globals.margin(0);
  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
  @include globals.text-inherit();

  overflow: visible;
}

.button-native::after {
  @include globals.button-state();
}

// Tab Button Disabled
// -------------------------------------------------------------------------------

:host(.tab-disabled)::after {
  @include globals.disabled-state();

  z-index: 1;
}

// Tab Button Focused
// -------------------------------------------------------------------------------

.button-native {
  min-width: globals.$ion-scale-1200;

  overflow: visible;

  &::after {
    @include globals.border-radius(inherit);
  }
}

// Only show the focus ring when the tab button is focused
:host(.ion-focused) .button-native {
  &::after {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
  }
}

// Tab Button Activated
// -------------------------------------------------------------------------------

:host(.ion-activated) .button-native::after {
  background: var(--background-activated);

  opacity: var(--background-activated-opacity);
}

// Tab Button Slots
// -------------------------------------------------------------------------------

// Icon

::slotted(ion-icon) {
  width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;
}

// Tab Button Shapes
// -------------------------------------------------------------------------------

:host(.tab-button-shape-soft) {
  @include globals.border-radius(globals.$ion-border-radius-200);
}

:host(.tab-button-shape-round) {
  @include globals.border-radius(globals.$ion-border-radius-400);
}

:host(.tab-button-shape-rectangular) {
  @include globals.border-radius(globals.$ion-border-radius-0);
}

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

:host ::slotted(ion-badge) {
  @include globals.position(calc(globals.$ion-scale-100 * -2), null, null, calc(50% + globals.$ion-scale-300));
  transform: translateX(-50%);
}

// Status badge (empty) needs less offset to overlap the icon
:host ::slotted(ion-badge:empty) {
  @include globals.position(calc(globals.$ion-scale-100 * -1), null, null, calc(50% + globals.$ion-scale-250));
}

:host ::slotted(ion-badge.badge-vertical-top) {
  @include globals.position(-2px);
}

:host ::slotted(ion-badge.badge-vertical-top:empty) {
  @include globals.position(calc(globals.$ion-scale-100 * -1));
}

:host ::slotted(ion-badge.badge-vertical-bottom) {
  @include globals.position(calc(50% - globals.$ion-scale-200));
}

:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
  @include globals.position(calc(50% - globals.$ion-scale-100));
}

:host ::slotted(ion-badge[vertical]:not(:empty)) {
  @include globals.padding(globals.$ion-scale-100);

  display: flex;

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

:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
  @include globals.position(calc(50% - globals.$ion-scale-100));
}

:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
  @include globals.position(calc(50% + globals.$ion-scale-100));
}

:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
  @include globals.position(calc(50% + 14px));
}