@use 'ui-design-system/src/styles/semantic/index' as *;
.ui-fab {
  // Reset and base styles
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  
  // Interaction states
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  
  // Transitions
  transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease-out;
  
  // Size variants
  &--small {
    width: $semantic-spacing-10; // 2.5rem
    height: $semantic-spacing-10; // 2.5rem
    box-shadow: $semantic-shadow-card-hover;
    
    .fab-icon {
      font-size: $semantic-typography-font-size-lg; // 1.125rem
    }
    
    .fab-touch-overlay {
      width: $semantic-spacing-4; // 1rem
      height: $semantic-spacing-4; // 1rem
      top: $semantic-spacing-3; // 0.75rem
      left: $semantic-spacing-3; // 0.75rem
      border-radius: $semantic-border-radius-sm;
    }
    
    .fab-spinner {
      width: $semantic-spacing-4; // 1rem
      height: $semantic-spacing-4; // 1rem
      border-width: $semantic-border-width-2; // 2px (closest to 1.5px)
    }
  }
  
  &--medium {
    width: $semantic-spacing-14; // 3.5rem
    height: $semantic-spacing-14; // 3.5rem
    box-shadow: $semantic-shadow-card-active;
    
    .fab-icon {
      font-size: $semantic-typography-font-size-2xl; // 1.5rem
    }
    
    .fab-touch-overlay {
      width: $semantic-spacing-5; // 1.25rem
      height: $semantic-spacing-5; // 1.25rem
      top: $semantic-spacing-4-5; // ~1.125rem (closest available)
      left: $semantic-spacing-4-5; // ~1.125rem (closest available)
      border-radius: $semantic-border-radius-lg;
    }
    
    .fab-spinner {
      width: $semantic-spacing-5; // 1.25rem
      height: $semantic-spacing-5; // 1.25rem
      border-width: $semantic-border-width-2;
    }
  }
  
  &--large {
    width: $semantic-spacing-24; // 6rem
    height: $semantic-spacing-24; // 6rem
    box-shadow: $semantic-shadow-card-featured;
    
    .fab-icon {
      font-size: $semantic-typography-font-size-5xl; // 3rem (closest to 2.5rem)
    }
    
    .fab-touch-overlay {
      width: $semantic-spacing-10; // 2.5rem
      height: $semantic-spacing-10; // 2.5rem
      top: $semantic-spacing-7; // 1.75rem
      left: $semantic-spacing-7; // 1.75rem
      border-radius: $semantic-border-radius-xl;
    }
    
    .fab-spinner {
      width: $semantic-spacing-8; // 2rem
      height: $semantic-spacing-8; // 2rem
      border-width: $semantic-border-width-3;
    }
  }
  
  // Color variants
  &--primary {
    background-color: $semantic-color-interactive-primary;
    color: $semantic-color-on-brand-primary;
    
    &:hover:not(:disabled) {
      background-color: $semantic-color-brand-primary;
      transform: $semantic-motion-hover-transform-scale-md;
      box-shadow: $semantic-shadow-elevation-4;
    }
  }
  
  &--secondary {
    background-color: $semantic-color-interactive-secondary;
    color: $semantic-color-on-brand-secondary;
    
    &:hover:not(:disabled) {
      background-color: $semantic-color-brand-secondary;
      transform: $semantic-motion-hover-transform-scale-md;
      box-shadow: $semantic-shadow-elevation-4;
    }
  }
  
  &--tertiary {
    background-color: $semantic-color-interactive-tertiary;
    color: $semantic-color-on-brand-tertiary;
    
    &:hover:not(:disabled) {
      background-color: $semantic-color-brand-tertiary;
      transform: $semantic-motion-hover-transform-scale-md;
      box-shadow: $semantic-shadow-elevation-4;
    }
  }
  
  // Position variants
  &--bottom-right {
    position: fixed;
    bottom: $semantic-spacing-8; // 2rem
    right: $semantic-spacing-6; // 1.5rem
    z-index: $semantic-z-index-toast; // 1080
  }
  
  &--bottom-left {
    position: fixed;
    bottom: $semantic-spacing-8; // 2rem
    left: $semantic-spacing-6; // 1.5rem
    z-index: $semantic-z-index-toast; // 1080
  }
  
  &--top-right {
    position: fixed;
    top: $semantic-spacing-8; // 2rem
    right: $semantic-spacing-6; // 1.5rem
    z-index: $semantic-z-index-toast; // 1080
  }
  
  &--top-left {
    position: fixed;
    top: $semantic-spacing-8; // 2rem
    left: $semantic-spacing-6; // 1.5rem
    z-index: $semantic-z-index-toast; // 1080
  }
  
  // States
  &:active:not(:disabled) {
    transform: scale(0.92);
  }
  
  &:focus-visible {
    box-shadow: 
      $semantic-shadow-button-focus,
      $semantic-shadow-card-active;
  }
  
  &--disabled {
    opacity: $semantic-opacity-disabled;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: $semantic-shadow-elevation-1;
  }
  
  &--loading {
    cursor: wait;
    
    .fab-icon {
      opacity: $semantic-opacity-invisible;
    }
  }
  
  // Pulse effect
  &--pulse {
    overflow: visible;
    
    .fab-pulse {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: inherit;
      border-radius: inherit;
      animation: fab-pulse 2s infinite;
      z-index: -1;
    }
  }
  
  @keyframes fab-pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
  
  // Expand animation
  &--expanding {
    animation: fab-expand 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  
  @keyframes fab-expand {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  // Touch overlay for ripple effect
  .fab-touch-overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    pointer-events: none;
  }
  
  // Icon container
  .fab-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  
  // Loader styles
  .fab-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  
  .fab-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  // Ripple effect
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: inherit;
  }
  
  &:active:not(:disabled)::after {
    transform: scale(1);
    opacity: 1;
    transition: none;
  }
  
  // Extended FAB support (for future use)
  &--extended {
    border-radius: $semantic-border-radius-pill; // 1.75rem equivalent
    padding: 0 $semantic-spacing-4; // 1rem
    width: auto;
    min-width: $semantic-spacing-20; // 5rem
    height: $semantic-spacing-14; // 3.5rem
    
    .fab-icon {
      margin-right: $semantic-spacing-1-5; // 0.375rem
    }
  }
}