/**
 * Theme Button Styles
 * 
 * This file contains all custom styles related to buttons using the UAGB 
 * button component, especially the `.standard` style variations.
 * 
 * If additional button styles or variations become too large, create a 
 * separate sub-file and name it accordingly (e.g., theme_buttons-outline.css).
 */

.wp-block-uagb-buttons a.uagb-buttons-repeater,
.uagb-infobox-cta-link,
.btn {
  background: var(--ast-global-color-2) !important;
  border: none !important;
  padding: 13px 25px;
  transition: all 0.5s ease-in-out;
  border-radius: 100px !important;
}

.wp-block-uagb-buttons a.uagb-buttons-repeater .uagb-button__link,
.uagb-infobox-cta-link span,
.btn {
  font-size: var(--btn-font-size);
  color: var(--ast-global-color-4) !important;
  border: none !important;
  text-decoration: none !important;
  line-height: 1.357;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  transition: all 0.5s ease-in-out;
  letter-spacing: 0.02em;
}

.wp-block-uagb-buttons a.uagb-buttons-repeater .uagb-button__link::after,
.btn.room-detail-btn::after,
.uagb-infobox-cta-link .uagb-inline-editing::after {
  content: "" !important;
  display: block !important;
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-pfeil-button.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  --my-size: 0.4em;
  width: var(--my-size);
  height: calc(var(--my-size) * 2.56);
  transition: all 0.5s ease-in-out;
}

.btn.all-rooms::before {
  content: "" !important;
  display: block !important;
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-pfeil-button.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  --my-size: 0.4em;
  width: var(--my-size);
  height: calc(var(--my-size) * 2.56);
  transform: rotate(180deg);
}

.wp-block-uagb-buttons a.uagb-buttons-repeater:hover,
.btn:hover,
.uagb-infobox-cta-link:hover {
  background: var(--ast-global-color-1) !important;
}

.wp-block-uagb-buttons .uagb-buttons__wrap {
  flex-wrap: wrap;
  gap: var(--gap-s) !important;
}

/* button in container with bg */
.wp-block-uagb-buttons.bg a.uagb-buttons-repeater:hover,
#nav-buttons .btn-anfrage:hover {
  background: var(--ast-global-color-4) !important;
}

.wp-block-uagb-buttons.bg a.uagb-buttons-repeater:hover .uagb-button__link,
#nav-buttons .btn-anfrage:hover {
  color: var(--ast-global-color-3) !important;
}

.wp-block-uagb-buttons.bg
  a.uagb-buttons-repeater:hover
  .uagb-button__link::after {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-pfeil-button-anthrazit.svg);
}

#nav-buttons .btn-anfrage:hover::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-anfrage-anthrazit);
}

@media (max-width: 1024px) {
  .wp-block-uagb-buttons .uagb-buttons__wrap {
    gap: 10px !important;
  }
}

@media (max-width: 768px) {
  .wp-block-uagb-buttons a.uagb-buttons-repeater,
  .uagb-infobox-cta-link,
  .btn {
    padding: 10px 20px;
  }
  .wp-block-uagb-buttons a.uagb-buttons-repeater .uagb-button__link {
    gap: 5px;
  }
}

/* Buchen buttons in room details/single */
#primary .cont-room-btns .uagb-button__link::after {
  display: none !important;
}

.cont-room-btns .uagb-button__link::before,
#nav-buttons .btn-anfrage::before {
  content: "" !important;
  display: block !important;
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-verfuegbar.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  --my-size: 1.429em;
  width: var(--my-size);
  height: var(--my-size);
  transition: all 0.5s ease-in-out;
}

.cont-room-btns .btn-berechnen .uagb-button__link::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-preis.svg);
}

.cont-room-btns .btn-anfrage .uagb-button__link::before,
#nav-buttons .btn-anfrage::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-anfrage.svg);
}