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


.tab-btn {
  @include text-inherit();
  @include margin(0);
  @include padding(0);

  display: flex;
  position: relative;

  flex: 1;
  flex-direction: var(--flex-direction, column);
  align-items: center;
  justify-content: var(--justify-content, flex-start);

  width: 100%;
  height: 100%;

  border: 0;

  outline: none;

  background: transparent;

  text-decoration: none;

  cursor: pointer;
  box-sizing: border-box;
  -webkit-user-drag: none;
}

.tab-btn:focus-visible {
  background: var(--background-focused);
}

.tab-btn:hover,
.tab-btn-selected {
  color: var(--color-selected);
}

.tab-btn-hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.tab-btn-disabled {
  pointer-events: none;

  opacity: .4;
}

.tab-btn-text {
  @include margin(var(--label-margin-top), null, var(--label-margin-bottom), null);

  display: var(--label-display, block);

  font-size: var(--label-font-size);

  line-height: var(--label-line-height);
}

.tab-btn-icon {
  @include margin(var(--icon-margin-top), null, var(--icon-margin-bottom), null);

  display: var(--icon-display, block);

  min-width: var(--icon-min-width);
  height: var(--icon-height, 1em);

  font-size: var(--icon-font-size);
}

.tab-btn-text,
.tab-btn-icon {
  align-self: center;

  min-width: 26px;
  max-width: 100%;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;
  box-sizing: border-box;
}

.tab-btn-has-label-only .tab-btn-text {
  white-space: normal;
}

.tab-btn-has-icon-only,
.tab-btn-has-label-only {
  --justify-content: center;
}


// Tab Badges
// --------------------------------------------------

.tab-btn-badge {
  @include position(6%, 4%, null, null); // 4% fallback
  @include position(null, var(--badge-end, calc(50% - 30px)), null, null);
  @include padding(1px, 6px);

  box-sizing: border-box;

  position: absolute;

  height: auto;

  font-size: 12px;

  line-height: 16px;
}

.tab-btn-has-label-only .tab-btn-badge {
  --badge-end: #{calc(50% - 50px)};
}

.tab-btn-has-icon-only .tab-btn-badge {
  --badge-end: #{calc(50% - 30px)};
}

.tab-btn-selected .tab-btn-icon {
  transform: var(--icon-transform-selected);
}