/**
 * Shared button styles for the Listings and CTA blocks.
 *
 * Ported from CozyStay's `.button` / `.cs-btn-*` system.
 *
 * @package Accommodate
 */

.accommodate-btn {
  --accommodate-btn-bg: var(--color-btn-bg);
  --accommodate-btn-color: var(--color-btn-text);
  --accommodate-btn-bg-hover: var(--color-btn-bg-hover);
  --accommodate-btn-color-hover: var(--color-btn-text-hover);
  --accommodate-btn-height: 52px;
  --accommodate-btn-radius: 0;
  position: relative;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-2xl);
  height: var(--accommodate-btn-height);
  background: var(--accommodate-btn-bg);
  border: 1px solid transparent;
  border-radius: var(--accommodate-btn-radius);
  color: var(--accommodate-btn-color);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-btn);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
}

.no-touch .accommodate-btn:hover {
  background: var(--accommodate-btn-bg-hover);
  color: var(--accommodate-btn-color-hover);
  border-color: var(--accommodate-btn-bg-hover);
}

.accommodate-btn--underline {
  --accommodate-btn-bg-hover: transparent;
  --accommodate-btn-color: var(--color-text);
  padding: 0;
  height: auto;
  background: none;
  color: var(--accommodate-btn-color);
  border-radius: 0;
}

.accommodate-btn--underline::before {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--accommodate-btn-bg);
  content: "";
  transition: transform var(--transition-fast);
  transform-origin: 0 0;
}

.no-touch .accommodate-btn--underline:hover::before {
  transform: scaleX(0);
}

.accommodate-btn--underline:hover,
.no-touch .accommodate-btn--underline:hover {
  color: var(--accommodate-btn-color);
}

.accommodate-btn--outline {
  --accommodate-btn-color: var(--color-text);
  background: none;
  border: 1px solid var(--accommodate-btn-bg);
}

.accommodate-btn--small {
  --accommodate-btn-height: 44px;
  padding-inline: var(--space-lg);
  font-size: var(--text-sm);
}

.accommodate-btn--large {
  --accommodate-btn-height: 62px;
  padding-inline: var(--space-2xl);
  font-size: var(--text-xl);
}

.accommodate-btn--extra-large {
  --accommodate-btn-height: 72px;
  padding-inline: var(--space-2xl);
  font-size: var(--text-2xl);
}

.accommodate-btn--square {
  --accommodate-btn-radius: 0;
}

.accommodate-btn--rounded {
  --accommodate-btn-radius: var(--radius-sm);
}

.accommodate-btn--pill {
  --accommodate-btn-radius: var(--radius-full);
}

.accommodate-btn--color-primary {
  --accommodate-btn-bg: var(--color-primary);
}

.accommodate-btn--color-secondary {
  --accommodate-btn-bg: var(--color-secondary);
}

.accommodate-btn--color-black {
  --accommodate-btn-bg: #000;
  --accommodate-btn-color: #fff;
}

.accommodate-btn--color-white {
  --accommodate-btn-bg: #fff;
  --accommodate-btn-color: #000;
}

/* Underline buttons take the color for their text too, not just the underline. */
.accommodate-btn--underline.accommodate-btn--color-primary {
  --accommodate-btn-color: var(--color-primary);
}

.accommodate-btn--underline.accommodate-btn--color-secondary {
  --accommodate-btn-color: var(--color-secondary);
}

.accommodate-btn--underline.accommodate-btn--color-black {
  --accommodate-btn-color: #000;
}

.accommodate-btn--underline.accommodate-btn--color-white {
  --accommodate-btn-color: #fff;
}

/* Hover text color presets (block setting). */
.accommodate-btn--hover-primary {
  --accommodate-btn-color-hover: var(--color-primary);
}

.accommodate-btn--hover-secondary {
  --accommodate-btn-color-hover: var(--color-secondary);
}

.accommodate-btn--hover-black {
  --accommodate-btn-color-hover: #000;
}

.accommodate-btn--hover-white {
  --accommodate-btn-color-hover: #fff;
}

.accommodate-btn__icon {
  position: relative;
  display: inline-block;
  align-self: center;
}

.accommodate-btn__icon--line {
  width: 40px;
  height: 1px;
  border-block-start: 1px solid currentColor;
}

.accommodate-btn--underline .accommodate-btn__icon {
  position: absolute;
  inset-inline-end: -15px;
}

.accommodate-btn--underline .accommodate-btn__icon--line {
  inset-inline-end: -40px;
  width: 30px;
}

.accommodate-btn__icon--arrow::after {
  font-family: var(--font-body);
  font-size: inherit;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  content: "→";
}

.accommodate-btn__icon--arrow-2::after {
  content: "⟶";
  font-size: larger;
  inset-inline-end: -5px;
}

.accommodate-btn__icon--arrow-3::after {
  content: "↗";
}

.accommodate-btn__icon--plus::after {
  content: "+";
}