@define-mixin docs-edit-on-github-ui-light {
  .docs-edit-on-github .ld-button {
    background-color: var(--ld-col-wht);
    color: var(--ld-col-neutral-900);
    box-shadow: inset 0 0 0 2px var(--ld-col-neutral-100);

    &:focus:focus-visible {
      color: var(--ld-col-neutral-900);
      background-color: var(--ld-col-neutral-050);
      box-shadow: inset 0 0 0 2px var(--ld-col-neutral-900);
    }

    @media (hover: hover) {
      &:hover {
        box-shadow: inset 0 0 0 2px var(--ld-col-neutral-900);
      }
    }

    &:active,
    &:active:focus-visible {
      background-color: var(--ld-col-neutral-800);
      color: var(--ld-col-wht);
      box-shadow: inset 0 0 0 2px var(--ld-col-neutral-800);
    }
  }
}
@define-mixin docs-edit-on-github-ui-dark {
  .docs-edit-on-github .ld-button {
    background-color: var(--ld-col-neutral-800);
    color: var(--ld-col-wht);
    box-shadow: inset 0 0 0 2px var(--ld-col-neutral-600);

    &:focus:focus-visible {
      color: var(--ld-col-wht);
      background-color: var(--ld-col-neutral-600);
      box-shadow: inset 0 0 0 2px var(--ld-col-wht);
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--ld-col-neutral-800);
        box-shadow: inset 0 0 0 2px var(--ld-col-wht);
      }
    }

    &:active,
    &:active:focus-visible {
      background-color: var(--ld-col-neutral-300);
      color: var(--ld-col-neutral-900);
      box-shadow: inset 0 0 0 2px var(--ld-col-neutral-300);
    }
  }
}

@mixin docs-edit-on-github-ui-light;

@media (prefers-color-scheme: dark) {
  @mixin docs-edit-on-github-ui-dark;
}
.docs-ui-dark {
  @mixin docs-edit-on-github-ui-dark;
}
.docs-ui-light {
  @mixin docs-edit-on-github-ui-light;
}

.docs-edit-on-github {
  display: block;
}
