/*
 * Button Component
 * A versatile button system with consistent sizing, variants, and states
 */

/* Bas	e button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-duration);
  border: none;
}

@keyframes a21-btn-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.btn--inline-loading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--spacing-sm);
}

.btn--inline-loading > .btn__label {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.btn--inline-loading > .btn__spinner {
  grid-column: 3;
  justify-self: start;
  width: 16px;
  height: 16px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.86);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--inline-loading > .btn__spinner > svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  transform-origin: center;
  animation: a21-btn-spinner-rotate 0.72s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.btn--inline-loading > .btn__spinner > svg path:nth-child(3),
.btn--inline-loading > .btn__spinner > svg path:nth-child(4) {
  opacity: 0.42;
}
.btn--inline-loading:hover > .btn__spinner > svg path,
.btn--inline-loading > .btn__spinner > svg path {
  fill: transparent;
}

.btn--inline-loading.is-loading > .btn__spinner {
  opacity: 0.92;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.btn--inline-loading.is-loading > .btn__spinner > svg {
  animation-play-state: running;
}

/* Size variants */
.btn--lg {
  height: 50px;
  font-size: 18px;
}

@media (max-width: 1024px) {
  .btn--lg {
    height: 43px;
    border-radius: var(--border-radius-xs);
    font-size: 16px;
  }
}

.btn--md {
  height: 43px;
  border-radius: var(--border-radius-xs);
  font-size: 16px; /* Stays 16px always */
}

.button-icon {
    height: 50px;
    width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--border-radius-sm);
}

@media (max-width: 1024px) {
    .button-icon {
        height: 43px;
        width: 43px;
        border-radius: var(--border-radius-xs);
    }
}

/* Primary Button */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-secondary-alt);
}

.btn--primary:hover {
    background: var(--color-secondary-alt);
    color: var(--color-primary);
}

.btn--primary:hover svg path {
    fill: var(--color-primary);
}

/* Dark Button */
.btn--dark {
  background: var(--color-secondary);
  color: var(--color-secondary-alt);
}

.btn--dark:hover {
  color: var(--color-primary);
}

/* Sapphire Button */
.btn--sapphire {
  background: var(--color-deep-sapphire-blue);
  color: var(--color-primary);
}

.btn--sapphire:hover {
    background: var(--color-primary);
    color: var(--color-secondary-alt);
}

.btn--sapphire:hover svg path {
    fill: var(--color-secondary-alt);
}

/* Secondary Gray Button */
.btn--secondary-gray {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary-gray:hover {
  background: var(--color-primary);
  color: var(--color-secondary-alt);
}

/* Transparent Primary Button */
.btn--transparent-primary {
  background: transparent;
  color: var(--color-secondary-alt);
}

.btn--transparent-primary:hover {
  background: var(--color-secondary);
  color: var(--color-primary);
}

/* Transparent Danger Button */
.btn--transparent-danger {
  background: transparent;
  color: var(--color-secondary-alt);
}

.btn--transparent-danger:hover {
  background: rgba(181, 0, 0, 0.2); /* 20% opacity of --color-warning */
  color: var(--color-warning);
}

/* Transparent Action Button */
.btn--transparent-action {
  background: transparent;
  color: var(--color-secondary-alt);
}

.btn--transparent-action:hover {
  background: rgba(1, 107, 255, 0.2); /* 20% opacity of --color-primary */
  color: var(--color-primary);
}

/* Google Button */
.btn--google {
  position: relative;
  background: var(--color-white);
  color: var(--color-secondary);
}

/* Gradient border effect */
.btn--google::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: var(--border-radius-xs);
  background: linear-gradient(90deg, #EA4335, #FBBC05, #34A853, #4285F4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -2;
}

.btn--google::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius-xs);
  background: var(--color-white, #ffffff);
  z-index: -1;
}

.btn--google:hover::before {
  opacity: 1;
}

.btn--google:hover {
  z-index: 1;
}

/* Facebook Button */
.btn--facebook {
  background: #1764E3;
  border: 1px solid #1764E3;
}
.btn--facebook > span,
.btn--facebook > .btn__label > span {
  color: var(--color-white);
}

.btn--facebook:hover{
  background: var(--color-white);
}
.btn--facebook:hover > span,
.btn--facebook:hover > .btn__label > span {
  color: #1764E3;
}

/* LinkedIn Button */
.btn--linkedin {
  background: #0072B1;
  color: var(--color-white);
  border: 1px solid #0072B1;
}

.btn--linkedin:hover {
  background: var(--color-white);
  color: #0072B1;
}

/* Golden Button */
.btn--golden {
  background: var(--color-golden-yellow);
  color: var(--color-secondary);
}

.btn--golden:hover {
  background: var(--color-secondary);
  color: var(--color-golden-yellow);
}

/* Focus state for accessibility */
.btn:focus {
  outline: none;
}

/* Click effect 'active' */
.btn:active {
  transform: scale(0.98);
}

/* Disabled state */
/* .btn:disabled {
  background: var(--color-support);
  color: var(--color-support-alt);
  cursor: not-allowed;
  opacity: 0.6;
}

.btn:disabled:hover {
  background: var(--color-support);
  color: var(--color-support-alt);
} */

/* Close button *//*  */
.close-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-deep-sapphire-blue);
  padding: 8.368px 8.381px;
  width: 60px;
  height: 60px;
  cursor: pointer;
}