/* ==========================================
   Button Component Styles
   ========================================== */

.btn-component {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: var(--button);
  text-decoration: none;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  padding: 10px 18px;
  border-radius: var(--radius-8);
  box-shadow: none;
  white-space: nowrap;
}

.btn-component .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-component .btn-arrow svg {
  display: block;
  overflow: hidden;
}

/* Arrow 3D Translate Hover Animation */
.btn-component .btn-arrow .default-arrow,
.btn-component .btn-arrow .hover-arrow {
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-component .btn-arrow .default-arrow {
  transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 1;
}

.btn-component .btn-arrow .hover-arrow {
  transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 0;
}

.btn-component:hover .btn-arrow .default-arrow {
  transform: translate3d(100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 0;
}

.btn-component:hover .btn-arrow .hover-arrow {
  transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 1;
}

/* ==========================================
   Variant 1: Primary (Solid Orange)
   ========================================== */
.btn-component.btn-primary {
  background-color: var(--burnt-orange);
  color: var(--white);
}

/* ==========================================
   Variant 2: Secondary / Text (Minimal Dark)
   ========================================== */
.btn-component.btn-secondary,
.btn-component.btn-text {
  background-color: var(--white);
  color: var(--dark);
  outline: none;
}