:root {
  --lcp-bridge-close-inset: 1.25rem;
  --lcp-bridge-close-size: 2.75rem;
  --lcp-bridge-close-icon-size: 1.5rem;
  --lcp-bridge-close-color: #0d1311;
  --lcp-bridge-close-action: #00a3c7;
  --lcp-bridge-close-radius: 0.25rem;
  --lcp-bridge-close-hover-bg: color-mix(in srgb, #0d1311 8%, transparent);
}

.lcp-bridge-close,
document-reader.lcp-regula-document-reader::part(container-close-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lcp-bridge-close-size);
  height: var(--lcp-bridge-close-size);
  min-width: var(--lcp-bridge-close-size);
  min-height: var(--lcp-bridge-close-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--lcp-bridge-close-radius);
  background: transparent;
  color: var(--lcp-bridge-close-color);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lcp-bridge-close {
  position: absolute;
  top: var(--lcp-bridge-close-inset);
  right: var(--lcp-bridge-close-inset);
}

.lcp-bridge-close:hover,
document-reader.lcp-regula-document-reader::part(container-close-button):hover {
  background-color: var(--lcp-bridge-close-hover-bg);
}

.lcp-bridge-close:focus-visible,
document-reader.lcp-regula-document-reader::part(container-close-button):focus-visible {
  outline: 2px solid var(--lcp-bridge-close-action);
  outline-offset: 2px;
}

.lcp-bridge-close-icon {
  width: var(--lcp-bridge-close-icon-size);
  height: var(--lcp-bridge-close-icon-size);
}