@import "./fab.vars";

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

ion-fab {
  position: absolute;
  z-index: $z-index-fixed-content;

  &[center] {
    @include position(null, null, null, 50%);
    @include margin-horizontal(-$fab-size / 2, null);
  }

  &[middle] {
    @include margin(-$fab-size / 2, null, null, null);

    top: 50%;
  }

  &[top] {
    top: $fab-content-margin;
  }

  &[right] {
    // scss-lint:disable PropertySpelling
    @include multi-dir() {
      right: $fab-content-margin;
    }

    @include multi-dir() {
      right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
      right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
    }
  }

  &[end] {
    @include position-horizontal(null, $fab-content-margin);
    @include safe-position-horizontal(null, $fab-content-margin);
  }

  &[bottom] {
    bottom: $fab-content-margin;
  }

  &[left] {
    // scss-lint:disable PropertySpelling
    @include multi-dir() {
      left: $fab-content-margin;
    }


    @include multi-dir() {
      left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
      left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
    }
  }

  &[start] {
    @include position-horizontal($fab-content-margin, null);
    @include safe-position-horizontal($fab-content-margin, null);
  }

  &[top][edge] {
    top: -$fab-size / 2;
  }

  &[bottom][edge] {
    bottom: -$fab-size / 2;
  }
}
