/* Selected G artwork. Keep masks and presentation scoped to Public Booking. */
.public-booking-page {
  --public-booking-icon-calendar: url("../images/public-booking/icons/calendar.svg");
  --public-booking-icon-guests: url("../images/public-booking/icons/guests.svg");
  --public-booking-icon-home: url("../images/public-booking/icons/home.svg");
  --public-booking-icon-activities: url("../images/public-booking/icons/activities.svg");
  --public-booking-icon-cart: url("../images/public-booking/icons/cart.svg");
  --public-booking-icon-clock: url("../images/public-booking/icons/clock.svg");
  --public-booking-icon-location: url("../images/public-booking/icons/location.svg");
  --public-booking-icon-check: url("../images/public-booking/icons/check.svg");
  --public-booking-icon-expand: url("../images/public-booking/icons/expand.svg");
  --public-booking-icon-close: url("../images/public-booking/icons/close.svg");
}

.public-booking-page .public-booking-icon,
.public-booking-page .public-booking-date-range__icon,
.public-booking-page .public-booking-guest-selector__icon,
.public-booking-page .public-booking-date-range__chevron,
.public-booking-page .public-booking-guest-selector__chevron,
.public-booking-page .public-booking-resource-card__selected-badge::before,
.public-booking-page .public-booking-selected-summary::before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--public-booking-icon-image) center / contain no-repeat;
  mask: var(--public-booking-icon-image) center / contain no-repeat;
  pointer-events: none;
}

.public-booking-page .public-booking-icon--home {
  --public-booking-icon-image: var(--public-booking-icon-home);
}

.public-booking-page .public-booking-icon--activities {
  --public-booking-icon-image: var(--public-booking-icon-activities);
}

.public-booking-page .public-booking-icon--cart {
  --public-booking-icon-image: var(--public-booking-icon-cart);
}

.public-booking-page .public-booking-icon--check,
.public-booking-page .public-booking-resource-card__selected-badge::before,
.public-booking-page .public-booking-selected-summary::before {
  --public-booking-icon-image: var(--public-booking-icon-check);
}

.public-booking-page .public-booking-icon--expand,
.public-booking-page .public-booking-date-range__chevron,
.public-booking-page .public-booking-guest-selector__chevron {
  --public-booking-icon-image: var(--public-booking-icon-expand);
}

.public-booking-page .public-booking-icon--close {
  --public-booking-icon-image: var(--public-booking-icon-close);
}

.public-booking-page .public-booking-date-range__icon {
  --public-booking-icon-image: var(--public-booking-icon-calendar);
  border: 0;
  border-radius: 0;
  color: var(--public-booking-accent);
}

.public-booking-page .public-booking-guest-selector__icon {
  --public-booking-icon-image: var(--public-booking-icon-guests);
  color: var(--public-booking-accent);
}

.public-booking-page .public-booking-date-range__icon::before,
.public-booking-page .public-booking-date-range__icon::after,
.public-booking-page .public-booking-guest-selector__icon::before,
.public-booking-page .public-booking-guest-selector__icon::after {
  content: none;
}

.public-booking-page .public-booking-date-range__chevron,
.public-booking-page .public-booking-guest-selector__chevron {
  border: 0;
  color: #4b5563;
  transform: none;
}

.public-booking-page .public-booking-date-range__trigger[aria-expanded="true"] .public-booking-date-range__chevron,
.public-booking-page .public-booking-guest-selector__trigger[aria-expanded="true"] .public-booking-guest-selector__chevron {
  transform: rotate(180deg);
}

.public-booking-page .public-booking-language-menu__chevron {
  width: 0.875rem;
  height: 0.875rem;
}

.public-booking-page .public-booking-resource-tab__icon > .public-booking-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.public-booking-page .public-booking-resource-tabs--search .public-booking-resource-tab__icon > .public-booking-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.public-booking-page .public-booking-location-option__selected-marker > .public-booking-icon,
.public-booking-page .public-booking-resource-tab__selected-marker > .public-booking-icon {
  width: 1rem;
  height: 1rem;
}

.public-booking-page .public-booking-cart-mobile-summary__icon > .public-booking-icon,
.public-booking-page .public-booking-cart-sheet__title-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.public-booking-page .public-booking-navigation-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.public-booking-page .public-booking-resource-card__selected-badge::before,
.public-booking-page .public-booking-selected-summary::before {
  margin-right: 0.25rem;
  vertical-align: -0.125rem;
  content: "";
}

.public-booking-page .public-booking-custom-property-option__input[type="checkbox"]:checked + .public-booking-custom-property-option__indicator::after {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: #fff;
  -webkit-mask: var(--public-booking-icon-check) center / contain no-repeat;
  mask: var(--public-booking-icon-check) center / contain no-repeat;
  transform: none;
}

@media (max-width: 640px) {
  .public-booking-page .public-booking-mobile-other-locations-toggle::after,
  .public-booking-page .public-booking-mobile-timepicker-ready > .tp-ui::after {
    width: 1rem;
    height: 1rem;
    border: 0;
    background-color: currentColor;
    -webkit-mask: var(--public-booking-icon-expand) center / contain no-repeat;
    mask: var(--public-booking-icon-expand) center / contain no-repeat;
    transform: none;
  }

  .public-booking-page .public-booking-mobile-other-locations-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .public-booking-page .public-booking-mobile-timepicker-ready > .tp-ui::after {
    color: var(--public-booking-accent);
    transform: translateY(-50%);
  }
}