/* ==========================================================================
   GLOBAL BUTTON STYLES - Based on Team Table Edit Modal
   ========================================================================== */

/* Primary Button - Black background, white text */
.btn-primary {
  padding: 0 24px;
  border-radius: var(--border-radius-sm);
  font-family: "DM Sans", sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--font-medium);
  cursor: pointer;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  transition: all 0.2s ease;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;

  &:active {
    transform: translateY(0);
  }

  &:focus {
    outline: none;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
}

/* Secondary Button - White background, dark text */
.btn-secondary {
  padding: 0 24px;
  border-radius: var(--border-radius-sm);
  font-family: "DM Sans", sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--font-medium);
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-border-light);
  transition: all 0.2s ease;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;

  &:active {
    transform: translateY(0);
  }

  &:focus {
    outline: none;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--color-bg-quaternary);
    transform: translateY(-1px);
  }
}

/* Danger Button - Red background, white text */
.btn-danger {
  padding: 0 24px;
  border-radius: var(--border-radius-sm);
  font-family: "DM Sans", sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--font-medium);
  cursor: pointer;
  background: var(--color-red);
  color: var(--color-white);
  border: none;
  transition: all 0.2s ease;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;

  &:active {
    transform: translateY(0);
  }

  &:focus {
    outline: none;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .btn-danger:hover {
    background: var(--color-red);
    transform: translateY(-1px);
  }
}

/* Text Button - No background, colored text */
.btn-text {
  padding: var(--space-8) 16px;
  border-radius: var(--border-radius-sm);
  font-family: "DM Sans", sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--font-medium);
  cursor: pointer;
  background: none;
  color: var(--color-black);
  border: none;
  transition: all 0.2s ease;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;

  &:active {
    transform: translateY(0);
  }

  &:focus {
    outline: none;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .btn-text:hover {
    background: var(--color-gray-very-light);
    transform: translateY(-1px);
  }
}

&.btn-text-muted {
  color: var(--color-gray-dark);
  font-weight: var(--font-normal);
}

/* Button Sizes */
.btn-sm {
  padding: 0 16px;
  font-size: var(--fs-small);
  min-height: 36px;
}

.btn-lg {
  padding: 0 32px;
  font-size: var(--fs-body);
  min-height: 52px;
}

/* Button Groups */
.btn-group {
  display: flex;
  gap: var(--space-12);
  align-items: center;

  &.btn-group-right {
    justify-content: flex-end;
  }

  &.btn-group-center {
    justify-content: center;
  }

  &.btn-group-left {
    justify-content: flex-start;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 0 20px;
    font-size: var(--fs-small);
    min-height: 44px;
  }

  .btn-text {
    padding: 0 12px;
    font-size: var(--fs-small);
    min-height: 44px;
  }

  .btn-group {
    gap: var(--space-8);
  }
}

@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 0 16px;
    font-size: var(--fs-small);
    min-height: 40px;
  }

  .btn-text {
    padding: 0 8px;
    font-size: var(--fs-small);
    min-height: 40px;
  }

  .btn-group {
    gap: var(--space-6);
  }
}