/* Frontend styles for button component */

.tm-block-button {
  --tm-button-margin-top: 0px;
  --tm-button-margin-bottom: 20px;
  
  margin-top: var(--tm-button-margin-top);
  margin-bottom: var(--tm-button-margin-bottom);
}

.tm-block-button--align-left {
  text-align: left;
}

.tm-block-button--align-center {
  text-align: center;
}

.tm-block-button--align-right {
  text-align: right;
}

.tm-block-button--full-width .tm-btn {
  width: 100%;
}

/* Button styles */
.tm-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tm-btn:disabled,
.tm-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hover animations */
.tm-btn--hover_lift {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tm-btn--hover_lift:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tm-btn--hover_scale {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tm-btn--hover_scale:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tm-btn--hover_glow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tm-btn--hover_glow:hover:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.tm-btn--none {
  /* No animation */
}

/* Icon spacing */
.tm-btn .me-2 {
  margin-right: 0.5rem;
}

.tm-btn .ms-2 {
  margin-left: 0.5rem;
}

/* Size variations (extra large) */
.tm-block-button--size-huge .tm-btn {
  padding: 0.75rem 2rem;
  font-size: 1.125rem;
}

/* Outline buttons styling */
.tm-btn.btn-outline-primary:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-success:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-danger:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-warning:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-info:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-light:hover:not(:disabled):not([aria-disabled="true"]),
.tm-btn.btn-outline-dark:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-2px);
}

/* Link style button */
.tm-btn.btn-link {
  text-decoration: underline;
  padding: 0;
}

.tm-btn.btn-link:hover:not(:disabled):not([aria-disabled="true"]) {
  text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .tm-block-button--full-width {
    display: block;
  }
  
  .tm-block-button--full-width .tm-btn {
    width: 100%;
    display: flex;
  }
  
  .tm-btn {
    font-size: 0.9rem;
  }
  
  .tm-block-button--align-left,
  .tm-block-button--align-center,
  .tm-block-button--align-right {
    text-align: center;
  }
}

/* Accessibility */
.tm-btn:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

.tm-btn.btn-link:focus {
  outline: none;
  text-decoration: underline;
}