/**
 * Button Component Styles
 */

.ep-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ep-space-2);
  font-family: var(--ep-font-family);
  font-weight: var(--ep-font-medium);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ep-radius);
  cursor: pointer;
  transition: all var(--ep-transition-fast);
  position: relative;
  white-space: nowrap;
  
  &:focus {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
  }
  
  // Variants
  &--primary {
    background-color: var(--ep-primary);
    color: var(--ep-white);
    border-color: var(--ep-primary);
    
    &:hover:not(.ep-button--disabled):not(.ep-button--loading) {
      background-color: var(--ep-primary-hover);
      border-color: var(--ep-primary-hover);
    }
  }
  
  &--secondary {
    background-color: var(--ep-white);
    color: var(--ep-secondary);
    border-color: var(--ep-gray-300);
    
    &:hover:not(.ep-button--disabled):not(.ep-button--loading) {
      background-color: var(--ep-gray-50);
      border-color: var(--ep-gray-400);
    }
  }
  
  &--success {
    background-color: var(--ep-success);
    color: var(--ep-white);
    border-color: var(--ep-success);
    
    &:hover:not(.ep-button--disabled):not(.ep-button--loading) {
      background-color: #008a2e;
      border-color: #008a2e;
    }
  }
  
  &--danger {
    background-color: var(--ep-error);
    color: var(--ep-white);
    border-color: var(--ep-error);
    
    &:hover:not(.ep-button--disabled):not(.ep-button--loading) {
      background-color: #b91c1c;
      border-color: #b91c1c;
    }
  }
  
  &--ghost {
    background-color: transparent;
    color: var(--ep-primary);
    border-color: transparent;
    
    &:hover:not(.ep-button--disabled):not(.ep-button--loading) {
      background-color: var(--ep-primary-light);
    }
  }
  
  // Sizes
  &--small {
    padding: var(--ep-space-1) var(--ep-space-3);
    font-size: var(--ep-text-sm);
    min-height: 2rem;
  }
  
  &--medium {
    padding: var(--ep-space-2) var(--ep-space-4);
    font-size: var(--ep-text-base);
    min-height: 2.5rem;
  }
  
  &--large {
    padding: var(--ep-space-3) var(--ep-space-6);
    font-size: var(--ep-text-lg);
    min-height: 3rem;
  }
  
  // States
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  &--loading {
    cursor: wait;
    
    .ep-button__text {
      opacity: 0.7;
    }
  }
  
  &--full-width {
    width: 100%;
  }
  
  // Icon positioning
  &__icon {
    display: flex;
    align-items: center;
    
    &--left {
      margin-right: var(--ep-space-1);
      margin-left: calc(var(--ep-space-1) * -1);
    }
    
    &--right {
      margin-left: var(--ep-space-1);
      margin-right: calc(var(--ep-space-1) * -1);
    }
    
    svg {
      width: 1em;
      height: 1em;
    }
  }
  
  // Loading spinner
  &__spinner {
    position: absolute;
    left: var(--ep-space-2);
    display: flex;
    align-items: center;
  }
  
  .ep-spinner {
    width: 1rem;
    height: 1rem;
    animation: ep-spin 1s linear infinite;
    
    &__path {
      animation: ep-spinner-dash 1.5s ease-in-out infinite;
    }
  }
}

// Animations
@keyframes ep-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ep-spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}