button:where(.jp-btn) {
  all: unset;
}
.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  border-radius: var(--jp-ui-corner-radius, 10px);
  padding: var(--jp-ui-button-pad-y) var(--jp-ui-button-pad-x);
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(
      var(--jp-ui-light-gradient-angle, 135deg),
      color-mix(in oklab, var(--jp-ui-accent) 6%, var(--jp-ui-bg)),
      color-mix(in oklab, var(--jp-ui-accent) 18%, var(--jp-ui-bg))
    ),
    linear-gradient(
      var(--jp-ui-light-gradient-cross-angle, 45deg),
      color-mix(in oklab, var(--jp-ui-accent) 55%, transparent),
      color-mix(in oklab, var(--jp-ui-accent) 35%, transparent)
    );
  color: var(--jp-ui-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.jp-btn[hidden] {
  display: none !important;
}

.jp-btn-unstyled {
  border-radius: 6px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-weight: 500;
}

.jp-btn:focus-visible {
  outline: 2px solid var(--jp-ui-focus-ring);
  outline-offset: 3px;
}

.jp-btn:disabled,
.jp-btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.15) saturate(0.8);
}

.jp-btn:hover {
  filter: brightness(1.1);
}

.jp-btn:active {
  transform: translateY(1px);
}

.jp-btn-primary {
  background: linear-gradient(
    var(--jp-ui-light-gradient-angle, 135deg),
    color-mix(in oklab, var(--jp-ui-accent) 100%, var(--jp-ui-black)),
    color-mix(in oklab, var(--jp-ui-accent) 60%, var(--jp-ui-accent-soft))
  );
  border-color: color-mix(in oklab, var(--jp-ui-accent) 82%, var(--jp-ui-black));
  color: var(--jp-ui-white);
  text-shadow: none;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--jp-ui-accent) 42%, var(--jp-ui-black));
}

.jp-btn-primary:hover {
  color: var(--jp-ui-white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--jp-ui-accent) 48%, var(--jp-ui-black));
}
.jp-btn-outline {
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(
      var(--jp-ui-light-gradient-angle, 135deg),
      color-mix(in oklab, var(--jp-ui-panel) 100%, transparent),
      color-mix(in oklab, var(--jp-ui-panel-strong) 20%, transparent)
    ),
    linear-gradient(
      var(--jp-ui-light-gradient-cross-angle, 45deg),
      color-mix(in oklab, var(--jp-ui-accent) 29%, transparent),
      color-mix(in oklab, var(--jp-ui-accent-soft) 52%, transparent)
    );
  border-color: transparent;
  color: color-mix(in oklab, var(--jp-ui-accent) 75%, var(--jp-ui-white));
}

.jp-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--jp-ui-accent);
  box-shadow: none;
}

.jp-btn-ghost:hover {
  background: color-mix(in oklab, var(--jp-ui-accent) 8%, transparent);
}

.jp-btn-danger {
  background: linear-gradient(
    var(--jp-ui-light-gradient-angle, 135deg),
    color-mix(in oklab, var(--jp-ui-danger) 90%, var(--jp-ui-black)),
    color-mix(in oklab, var(--jp-ui-danger) 60%, var(--jp-ui-accent-soft))
  );
  border-color: color-mix(in oklab, var(--jp-ui-danger) 70%, var(--jp-ui-accent-soft));
  color: var(--jp-ui-white);
  box-shadow: var(--jp-ui-button-shadow-x, 0) var(--jp-ui-button-shadow-y, 14px) 32px color-mix(in oklab, var(--jp-ui-danger) 45%, transparent),
    0 0 0 1px color-mix(in oklab, var(--jp-ui-danger) 65%, var(--jp-ui-accent-soft));
}

.jp-btn-sm {
  padding: var(--jp-ui-button-sm-pad-y) var(--jp-ui-button-sm-pad-x);
  font-size: 14px;
}

.jp-btn-lg {
  padding: var(--jp-ui-button-lg-pad-y) var(--jp-ui-button-lg-pad-x);
  font-size: 16px;
}

.jp-btn-compact {
  padding: var(--jp-ui-button-compact-pad-y) var(--jp-ui-button-compact-pad-x);
  font-size: 14px;
}

.jp-btn-block {
  width: 100%;
}