@use 'sass:map';
@use 'mixin' as *;
@use 'theme-variables' as *;

@include export-module('floating-action-button-layout') {

  // Base button styling
  .sf-fab.sf-btn {
    align-items: center;
    display: inline-flex;
    min-height: $fab-dimension;
    min-width: $fab-dimension;
    position: absolute;
    z-index: $fab-z-index;

    // Positioning
    &.sf-fab-fixed {
      position: fixed;
    }

    &.sf-fab-top {
      top: $fab-offset;
    }

    &.sf-fab-bottom {
      bottom: $fab-offset;
    }

    &.sf-fab-left {
      left: $fab-offset;
    }

    &.sf-fab-right {
      right: $fab-offset;
    }

    // Top center and Bottom center positioning
    &.sf-fab-top.sf-fab-center,
    &.sf-fab-bottom.sf-fab-center {
      left: 50%;
      transform: translateX(-50%);
    }

    // Middle left and Middle right positioning
    &.sf-fab-middle.sf-fab-left,
    &.sf-fab-middle.sf-fab-right {
      top: 50%;
      transform: translateY(-50%);
    }

    // Center positioning
    &.sf-fab-middle.sf-fab-center {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .sf-fab {
    @each $size in ('la', 'me', 'sm') {
      $size-data: map.get($fab-sizes, $size);
      @include fab-size-variant($size,
        map.get($size-data, 'border-radius'),
        map.get($size-data, 'gap'),
        map.get($size-data, 'padding'),
        map.get($size-data, 'font-size'),
        map.get($size-data, 'line-height'),
        map.get($size-data, 'svg-font-size'),
        map.get($size-data, 'icon-padding'));
    }
  }

  .sf-rtl {
    &.sf-fab.sf-btn {
      &.sf-fab-right.sf-fab-center {
        right: 50%;
        transform: translateX(50%);
      }

      &.sf-fab-top.sf-fab-middle {
        &.sf-fab-right.sf-fab-center {
          right: 50%;
          top: 50%;
          transform: translate(50%, -50%);
        }
      }
    }
  }

  // Visibility
  .sf-fab-hidden {
    visibility: hidden;
  }
}