@import "./fab.vars";

// Floating Action Button Container
// --------------------------------------------------

:host {
  position: absolute;

  z-index: $z-index-fixed-content;
}


// FAB Horizontal Positioning
// --------------------------------------------------

:host(.fab-horizontal-center) {
  @include position(null, null, null, 50%);
  @include margin-horizontal(-$fab-size / 2, null);
}

:host(.fab-horizontal-start) {
  @include position-horizontal(
    calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)), null
  );
}

:host(.fab-horizontal-end) {
  @include position-horizontal(
    null, calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px))
  );
}


// FAB Vertical Positioning
// --------------------------------------------------

:host(.fab-vertical-top) {
  top: $fab-content-margin;
}

:host(.fab-vertical-top.fab-edge) {
  top: -$fab-size / 2;
}


:host(.fab-vertical-bottom) {
  bottom: $fab-content-margin;
}

:host(.fab-vertical-bottom.fab-edge) {
  bottom: -$fab-size / 2;
}


:host(.fab-vertical-center) {
  @include margin(-$fab-size / 2, null, null, null);

  top: 50%;
}
