/* Icon Button Styles - Hostinger Design System */
.h-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--h-spacing-2xs, 8px);
  border-radius: var(--h-border-radius-sm, 8px);
  transition: all 0.2s ease;
  color: currentColor;
  font-family: var(--font-family);
  font-size: var(--font-size-body-2, 14px);
  font-weight: var(--font-weight-body-2, 399);
  line-height: var(--line-height-body-2, 20px);
  min-width: 32px;
  min-height: 32px;
}

.h-icon-button:hover:not(:disabled) {
  background: var(--h-bg-neutral-hover, rgba(0, 0, 0, 0.05));
}

.h-icon-button:active:not(:disabled) {
  background: var(--h-bg-neutral-hover, rgba(0, 0, 0, 0.1));
}

.h-icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.h-icon-button--text-neutral {
  color: var(--h-fg-neutral-default);
}

.h-icon-button--text-neutral:hover:not(:disabled) {
  color: var(--h-fg-neutral-hover, var(--h-color-neutral-1000));
}

.h-icon-button--contain-primary {
  background: var(--h-button-contain-primary-bg, var(--h-bg-brand-default));
  color: var(
    --h-button-contain-primary-color,
    var(--h-fg-brand-inverse-default)
  );
  border: var(--h-button-contain-primary-border, 1px solid transparent);
}

.h-icon-button--contain-primary:hover:not(:disabled) {
  background: var(--h-button-contain-primary-bg-hover, var(--h-bg-brand-hover));
  color: var(
    --h-button-contain-primary-color-hover,
    var(--h-fg-brand-inverse-default)
  );
  border: var(--h-button-contain-primary-border-hover, 1px solid transparent);
}

.h-icon-button--contain-primary:disabled {
  background: var(
    --h-button-contain-primary-bg-disabled,
    var(--h-bg-brand-disabled)
  );
  color: var(
    --h-button-contain-primary-color-disabled,
    var(--h-fg-brand-inverse-disabled)
  );
  border: var(
    --h-button-contain-primary-border-disabled,
    1px solid transparent
  );
}

.h-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
  fill: currentColor;
  flex-shrink: 0;
  display: block;
}

/* Smaller icon for pencil (delete button) */
#embed-clear-btn .h-icon {
  width: 18px;
  height: 18px;
}

/* SVG sprite container */
.svg-sprite {
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}