@import '../../base/tailwind3-lite.scss';
@import '../../buttons/button/tailwind3.scss';
$fab-offset: 16px !default;

$fab-border-radius: 9999px !default;
$fab-min-height: 40px !default;
$fab-min-width: 40px !default;
$fab-padding: 0 15px !default;
$fab-icon-font-size: $text-base !default;

$fab-small-border-radius: $fab-border-radius !default;
$fab-small-min-height: 32px !default;
$fab-small-min-width: 32px !default;
$fab-small-padding: 0 11px !default;
$fab-small-icon-font-size: $text-sm !default;

$fab-bigger-border-radius: $fab-border-radius !default;
$fab-bigger-min-height: 52px !default;
$fab-bigger-min-width: 52px !default;
$fab-bigger-padding: 0 21px !default;
$fab-bigger-icon-font-size: $text-2xl !default;

$fab-bigger-small-border-radius: $fab-border-radius !default;
$fab-bigger-small-min-height: 46px !default;
$fab-bigger-small-min-width: 46px !default;
$fab-bigger-small-padding: 0 17px !default;
$fab-bigger-small-icon-font-size: $text-lg !default;

$fab-box-shadow: $fab-shadow !default;
$fab-focus-box-shadow: $shadow-focus-ring1 !default;

@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
  border-radius: $border-radius;
  min-height: $min-height;
  min-width: $min-width;
  padding: $padding;

  &.e-icon-btn {
    padding: 0;
  }

  .e-btn-icon {
    font-size: $icon-font-size;
  }
}

@include export-module('floating-action-button-layout') {
  .e-fab.e-btn {
    align-items: center;
    border-radius: $fab-border-radius;
    display: inline-flex;
    min-height: $fab-min-height;
    min-width: $fab-min-width;
    padding: $fab-padding;
    position: absolute;
    z-index: 100000;

    .e-btn-icon {
      margin-top: 0;
      font-size: $fab-icon-font-size;
    }

    &.e-icon-btn {
      padding: 0;
    }

    &.e-fab-fixed {
      position: fixed;
    }

    &.e-fab-top {
      top: $fab-offset;
      &.e-fab-middle {
        top: 50%;
        transform: translateY(-50%);
        &.e-fab-left.e-fab-center {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

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

    &.e-fab-left {
      left: $fab-offset;
      &.e-fab-center {
        left: 50%;
        transform: translateX(-50%);
      }
    }

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

  .e-rtl {
    &.e-fab.e-btn {
      &.e-fab-top {
        top: $fab-offset;
        &.e-fab-middle {
          top: 50%;
          transform: translateY(-50%);
          &.e-fab-right.e-fab-center {
            right: 50%;
            top: 50%;
            transform: translate(50%, -50%);
          }
        }
      }
  
      &.e-fab-bottom {
        bottom: $fab-offset;
      }
  
      &.e-fab-right {
        right: $fab-offset;
        &.e-fab-center {
          right: 50%;
          transform: translateX(50%);
        }
      }
  
      &.e-fab-left {
        left: $fab-offset;
      }
    }
  }

  .e-fab-hidden {
    visibility: hidden;
  }

  .e-small.e-fab.e-btn,
  .e-small .e-fab.e-btn {
    @include fab-button-styles($fab-small-border-radius, $fab-small-min-height, $fab-small-min-width, $fab-small-padding, $fab-small-icon-font-size);
  }
}


@include export-module('floating-action-button-theme') {
  .e-fab.e-btn {
    box-shadow: $fab-box-shadow;

    &:hover:not(:focus),
    &:active,
    &.e-active,
    &:disabled {
      box-shadow: $fab-box-shadow;
    }

    &:focus {
      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark') {
        box-shadow: $fab-box-shadow;
      }
      @if $skin-name == 'tailwind' {
        box-shadow: $fab-focus-box-shadow;
      }
    }
  }
}

@if $skin-name == 'tailwind3' {
  .e-fab.e-btn:focus-visible {
    box-shadow: $fab-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
  }
}