@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-fab-menu {
  position: relative;
  display: inline-flex;
  z-index: $semantic-z-index-dropdown;
  
  // Position variants
  &--bottom-right {
    position: fixed;
    bottom: $semantic-spacing-layout-section-md;
    right: $semantic-spacing-layout-section-md;
  }
  
  &--bottom-left {
    position: fixed;
    bottom: $semantic-spacing-layout-section-md;
    left: $semantic-spacing-layout-section-md;
  }
  
  &--top-right {
    position: fixed;
    top: $semantic-spacing-layout-section-md;
    right: $semantic-spacing-layout-section-md;
  }
  
  &--top-left {
    position: fixed;
    top: $semantic-spacing-layout-section-md;
    left: $semantic-spacing-layout-section-md;
  }
  
  // Size variants
  &--sm {
    .ui-fab-menu__trigger {
      width: $semantic-sizing-button-height-sm;
      height: $semantic-sizing-button-height-sm;
      
      .ui-fab-menu__trigger-icon {
        width: $semantic-sizing-icon-button;
        height: $semantic-sizing-icon-button;
        font-size: map-get($semantic-typography-body-small, font-size);
      }
    }
    
    .ui-fab-menu__item {
      min-height: $semantic-sizing-button-height-sm;
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      font-family: map-get($semantic-typography-body-small, font-family);
      font-size: map-get($semantic-typography-body-small, font-size);
      font-weight: map-get($semantic-typography-body-small, font-weight);
      line-height: map-get($semantic-typography-body-small, line-height);
    }
  }
  
  &--md {
    .ui-fab-menu__trigger {
      width: $semantic-sizing-button-height-md;
      height: $semantic-sizing-button-height-md;
      
      .ui-fab-menu__trigger-icon {
        width: $semantic-sizing-icon-button;
        height: $semantic-sizing-icon-button;
        font-size: map-get($semantic-typography-body-medium, font-size);
      }
    }
    
    .ui-fab-menu__item {
      min-height: $semantic-sizing-button-height-md;
      padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
      font-family: map-get($semantic-typography-body-medium, font-family);
      font-size: map-get($semantic-typography-body-medium, font-size);
      font-weight: map-get($semantic-typography-body-medium, font-weight);
      line-height: map-get($semantic-typography-body-medium, line-height);
    }
  }
  
  &--lg {
    .ui-fab-menu__trigger {
      width: $semantic-sizing-button-height-lg;
      height: $semantic-sizing-button-height-lg;
      
      .ui-fab-menu__trigger-icon {
        width: $semantic-sizing-icon-navigation;
        height: $semantic-sizing-icon-navigation;
        font-size: map-get($semantic-typography-body-large, font-size);
      }
    }
    
    .ui-fab-menu__item {
      min-height: $semantic-sizing-button-height-lg;
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
      font-family: map-get($semantic-typography-body-large, font-family);
      font-size: map-get($semantic-typography-body-large, font-size);
      font-weight: map-get($semantic-typography-body-large, font-weight);
      line-height: map-get($semantic-typography-body-large, line-height);
    }
  }
  
  // Direction variants
  &--up {
    .ui-fab-menu__items {
      flex-direction: column-reverse;
      bottom: 100%;
      margin-bottom: $semantic-spacing-component-sm;
    }
    
    .ui-fab-menu__item {
      transform-origin: center bottom;
    }
  }
  
  &--down {
    .ui-fab-menu__items {
      flex-direction: column;
      top: 100%;
      margin-top: $semantic-spacing-component-sm;
    }
    
    .ui-fab-menu__item {
      transform-origin: center top;
    }
  }
  
  &--left {
    .ui-fab-menu__items {
      flex-direction: row-reverse;
      right: 100%;
      margin-right: $semantic-spacing-component-sm;
      align-items: center;
    }
    
    .ui-fab-menu__item {
      transform-origin: right center;
    }
  }
  
  &--right {
    .ui-fab-menu__items {
      flex-direction: row;
      left: 100%;
      margin-left: $semantic-spacing-component-sm;
      align-items: center;
    }
    
    .ui-fab-menu__item {
      transform-origin: left center;
    }
  }
  
  // State variants
  &--disabled {
    .ui-fab-menu__trigger {
      opacity: $semantic-opacity-disabled;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
  
  &--animating {
    pointer-events: none;
  }
}

.ui-fab-menu__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: $semantic-border-width-1 solid transparent;
  border-radius: $semantic-border-radius-full;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  box-shadow: $semantic-shadow-elevation-2;
  overflow: hidden;
  
  // Color variants
  &--primary {
    background: $semantic-color-primary;
    color: $semantic-color-on-primary;
    border-color: $semantic-color-primary;
    
    &:hover:not([disabled]) {
      box-shadow: $semantic-shadow-elevation-3;
    }
  }
  
  &--secondary {
    background: $semantic-color-secondary;
    color: $semantic-color-on-secondary;
    border-color: $semantic-color-secondary;
    
    &:hover:not([disabled]) {
      box-shadow: $semantic-shadow-elevation-3;
    }
  }
  
  &--success {
    background: $semantic-color-success;
    color: $semantic-color-on-success;
    border-color: $semantic-color-success;
    
    &:hover:not([disabled]) {
      box-shadow: $semantic-shadow-elevation-3;
    }
  }
  
  &--danger {
    background: $semantic-color-danger;
    color: $semantic-color-on-danger;
    border-color: $semantic-color-danger;
    
    &:hover:not([disabled]) {
      box-shadow: $semantic-shadow-elevation-3;
    }
  }
  
  &:focus-visible {
    outline: 2px solid $semantic-color-focus;
    outline-offset: 2px;
  }
  
  &:active:not([disabled]) {
    transform: scale(0.95);
    box-shadow: $semantic-shadow-elevation-1;
  }
  
  &--active {
    transform: rotate(45deg);
  }
  
  .ui-fab-menu__trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &--close {
      transform: rotate(-45deg);
    }
  }
  
  .ui-fab-menu__trigger-ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: currentColor;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease;
    }
    
    .ui-fab-menu__trigger:active & {
      &::after {
        width: 100%;
        height: 100%;
        opacity: $semantic-opacity-subtle;
      }
    }
  }
}

.ui-fab-menu__items {
  position: absolute;
  display: flex;
  gap: $semantic-spacing-component-xs;
  pointer-events: none;
  z-index: 1;
  
  .ui-fab-menu--open & {
    pointer-events: auto;
  }
}

.ui-fab-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-xs;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  border-radius: $semantic-border-radius-md;
  background: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  box-shadow: $semantic-shadow-elevation-1;
  transform: scale(0);
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  
  .ui-fab-menu--open & {
    transform: scale(1);
    opacity: 1;
    
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        transition-delay: #{($i - 1) * 50ms};
      }
    }
  }
  
  .ui-fab-menu--animating:not(.ui-fab-menu--open) & {
    transition-delay: 0ms;
  }
  
  // Color variants
  &--primary {
    background: $semantic-color-primary;
    color: $semantic-color-on-primary;
    border-color: $semantic-color-primary;
  }
  
  &--secondary {
    background: $semantic-color-secondary;
    color: $semantic-color-on-secondary;
    border-color: $semantic-color-secondary;
  }
  
  &--success {
    background: $semantic-color-success;
    color: $semantic-color-on-success;
    border-color: $semantic-color-success;
  }
  
  &--danger {
    background: $semantic-color-danger;
    color: $semantic-color-on-danger;
    border-color: $semantic-color-danger;
  }
  
  &:hover:not([disabled]) {
    box-shadow: $semantic-shadow-elevation-2;
    transform: scale(1.05);
  }
  
  &:focus-visible {
    outline: 2px solid $semantic-color-focus;
    outline-offset: 2px;
  }
  
  &:active:not([disabled]) {
    transform: scale(0.98);
    box-shadow: $semantic-shadow-elevation-1;
  }
  
  &--disabled {
    opacity: $semantic-opacity-disabled;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .ui-fab-menu__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-icon-inline;
    height: $semantic-sizing-icon-inline;
    flex-shrink: 0;
  }
  
  .ui-fab-menu__item-label {
    font-weight: $semantic-typography-font-weight-medium;
  }
  
  .ui-fab-menu__item-ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: currentColor;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease;
    }
    
    .ui-fab-menu__item:active & {
      &::after {
        width: 100%;
        height: 100%;
        opacity: $semantic-opacity-subtle;
      }
    }
  }
}

.ui-fab-menu__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $semantic-color-backdrop;
  backdrop-filter: blur(2px);
  z-index: -1;
  opacity: 0;
  transition: opacity $semantic-motion-duration-fast $semantic-motion-easing-ease;
  
  .ui-fab-menu--open & {
    opacity: 1;
  }
}

// Responsive design
@media (max-width: 768px) {
  .ui-fab-menu {
    &--bottom-right,
    &--bottom-left,
    &--top-right,
    &--top-left {
      margin: $semantic-spacing-component-sm;
    }
  }
  
  .ui-fab-menu__item {
    .ui-fab-menu__item-label {
      font-family: map-get($semantic-typography-body-small, font-family);
      font-size: map-get($semantic-typography-body-small, font-size);
      font-weight: map-get($semantic-typography-body-small, font-weight);
      line-height: map-get($semantic-typography-body-small, line-height);
    }
  }
}

// High contrast mode support
@media (prefers-contrast: high) {
  .ui-fab-menu__trigger,
  .ui-fab-menu__item {
    border-width: $semantic-border-width-2;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .ui-fab-menu__trigger,
  .ui-fab-menu__item,
  .ui-fab-menu__backdrop,
  .ui-fab-menu__trigger-icon,
  .ui-fab-menu__trigger-ripple::after,
  .ui-fab-menu__item-ripple::after {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
  
  .ui-fab-menu__item {
    .ui-fab-menu--open & {
      transition-delay: 0ms;
    }
  }
}