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

:host(.fab-horizontal-center) {
  left: 50%;
  /* stylelint-disable-next-line declaration-no-important */
  transform: translate3d(-50%, 0, 0) !important;
}
:host-context([dir=rtl]):host(.fab-horizontal-center), :host-context([dir=rtl]).fab-horizontal-center {
  left: unset;
  right: unset;
  right: 50%;
}

:host(.fab-horizontal-start) {
  left: calc(var(--bkkr-spacer, 16px) + var(--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(var(--bkkr-spacer, 16px) + var(--safe-area-left, 0px));
}

:host(.fab-horizontal-end) {
  right: calc(var(--bkkr-spacer, 16px) + var(--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(var(--bkkr-spacer, 16px) + var(--safe-area-right, 0px));
}

:host(.fab-vertical-top) {
  top: var(--bkkr-spacer, 16px);
}

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

:host(.fab-vertical-bottom) {
  bottom: var(--bkkr-spacer, 16px);
}

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

:host(.fab-vertical-center) {
  top: 50%;
  /* stylelint-disable-next-line declaration-no-important */
  transform: translate3d(0, -50%, 0) !important;
}

:host(.fab-vertical-center.fab-horizontal-center) {
  /* stylelint-disable-next-line declaration-no-important */
  transform: translate3d(-50%, -50%, 0) !important;
}