.surface {
  
  --_background-color: var(--surface-bg, transparent);
  --_foreground-color: var(--surface-color, inherit);
  --_border-width: var(--surface-border-width, 0);
  --_border-style: var(--surface-border-style, solid);
  --_border-color: var(--surface-border-color, currentColor);
  --_border-radius: var(--surface-border-radius, 0);
  --_padding: var(--surface-padding, 0);
  --_heading-color: var(--surface-heading-color, inherit);
  --_link-color: var(--surface-link-color, currentColor);
  --_link-hover-color: var(--surface-link-hover-color, var(--_link-color));
  --_link-active-color: var(--surface-link-active-color, var(--_link-color));
  --_outline-width: var(--surface-outline-width, var(--_border-width));
  --_outline-offset: calc(var(--_outline-width) * -1);

  
  background-color: var(--_background-color);
  color: var(--_foreground-color);
  border: var(--_border-width) var(--_border-style) var(--_border-color);
  padding: var(--_padding);
  border-radius: var(--_border-radius);
  box-sizing: border-box;

  
  outline: var(--_outline-width) solid transparent;
  outline-offset: var(--_outline-offset);
}


.surface * {
  color: inherit;
}


.surface :is(h1, h2, h3, h4) {
  color: var(--_heading-color);
}


.surface a {
  color: var(--_link-color);

  &:hover {
    color: var(--_link-hover-color);
  }

  &:focus-visible {
    color: var(--_link-hover-color);
  }

  &:active {
    color: var(--_link-active-color);
  }
}