:host {
  position: absolute;
  z-index: 999;
}

:host(.fab-horizontal-center) {
  -webkit-margin-start: -28px;
  margin-inline-start: -28px;
}
@supports (inset-inline-start: 0) {
  :host(.fab-horizontal-center) {
    inset-inline-start: 50%;
  }
}
@supports not (inset-inline-start: 0) {
  :host(.fab-horizontal-center) {
    left: 50%;
  }
  :host-context([dir=rtl]):host(.fab-horizontal-center), :host-context([dir=rtl]).fab-horizontal-center {
    left: unset;
    right: unset;
    right: 50%;
  }
  @supports selector(:dir(rtl)) {
    :host(.fab-horizontal-center):dir(rtl) {
      left: unset;
      right: unset;
      right: 50%;
    }
  }
}

@supports (inset-inline-start: 0) {
  :host(.fab-horizontal-start) {
    inset-inline-start: calc(10px + var(--ion-safe-area-left, 0px));
  }
}
@supports not (inset-inline-start: 0) {
  :host(.fab-horizontal-start) {
    left: calc(10px + var(--ion-safe-area-left, 0px));
  }
  :host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
    left: unset;
    right: unset;
    right: calc(10px + var(--ion-safe-area-left, 0px));
  }
  @supports selector(:dir(rtl)) {
    :host(.fab-horizontal-start):dir(rtl) {
      left: unset;
      right: unset;
      right: calc(10px + var(--ion-safe-area-left, 0px));
    }
  }
}

@supports (inset-inline-start: 0) {
  :host(.fab-horizontal-end) {
    inset-inline-end: calc(10px + var(--ion-safe-area-right, 0px));
  }
}
@supports not (inset-inline-start: 0) {
  :host(.fab-horizontal-end) {
    right: calc(10px + var(--ion-safe-area-right, 0px));
  }
  :host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
    left: unset;
    right: unset;
    left: calc(10px + var(--ion-safe-area-right, 0px));
  }
  @supports selector(:dir(rtl)) {
    :host(.fab-horizontal-end):dir(rtl) {
      left: unset;
      right: unset;
      left: calc(10px + var(--ion-safe-area-right, 0px));
    }
  }
}

:host(.fab-vertical-top) {
  top: 10px;
}

:host(.fab-vertical-top.fab-edge) {
  top: -28px;
}

:host(.fab-vertical-bottom) {
  bottom: 10px;
}

:host(.fab-vertical-bottom.fab-edge) {
  bottom: -28px;
}

:host(.fab-vertical-center) {
  margin-top: -28px;
  top: 50%;
}