/**
 * Featured Amenity block styles.
 *
 * Modeled after CozyStay's cs-info-box-item.
 *
 * @package Accommodate
 */

/* Frontend */
.featured-amenity {
  display: flex;
  justify-content: center;
  container-type: inline-size;
  container-name: featured-amenity;
}

.featured-amenity__container {
  --featured-amenity-border: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--featured-amenity-border);
  border-radius: var(--radius-featured);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.no-touch .featured-amenity__container:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.125rem);
}

.featured-amenity__icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

.featured-amenity__icon .accommodate-icon {
  width: var(--icon-size-featured);
  height: var(--icon-size-featured);
}

/* Editor */
.featured-amenity.is-editor {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.featured-amenity__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}