/* stylelint-disable scss/at-import-no-partial-leading-underscore */
/* stylelint-disable-next-line number-max-precision */
.btn-socketed {
  position: relative;
  display: inline-block;
  border: 1px solid var(--dh-color-input-border);
  padding: 0.42145rem 1.5rem;
  color: var(--dh-color-neutral-contrast);
  background: var(--dh-color-action-bg);
  line-height: 1.3;
  user-select: none;
  border-radius: 4px;
  transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
  cursor: pointer;
}
.btn-socketed::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--dh-color-content-bg, #2d2a2e);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--dh-color-input-border);
  transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}
.btn-socketed:focus {
  border-color: var(--dh-color-input-focus-border);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
}
.btn-socketed:focus::after {
  border-color: var(--dh-color-input-focus-border);
}
.btn-socketed:hover {
  background-color: var(--dh-color-action-hover-bg);
  border-color: var(--dh-color-hover-border);
}
.btn-socketed:hover::after {
  border-color: var(--dh-color-hover-border);
}
.btn-socketed:active {
  border-color: var(--dh-color-hover-border);
  background-color: var(--dh-color-action-down-bg);
}
.btn-socketed .btn-socketed-icon {
  display: none;
}
.btn-socketed:disabled, .btn-socketed:disabled:hover {
  cursor: not-allowed;
  border-color: var(--dh-color-action-disabled-border);
  background-color: var(--dh-color-action-disabled-bg);
}
.btn-socketed:disabled::after, .btn-socketed:disabled:hover::after {
  border-color: var(--dh-color-action-disabled-border);
}

.btn-socketed.btn-socketed-linked::after {
  border-color: var(--dh-color-accent-bg);
  background-color: var(--dh-color-accent-bg);
}
.btn-socketed.btn-socketed-linked.btn-socketed-linked-source::after {
  border-color: var(--dh-color-visual-purple);
  background-color: var(--dh-color-visual-purple);
}
.btn-socketed.btn-socketed-linked .btn-socketed-icon.linked {
  display: block;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 9px);
  z-index: 1;
}
.btn-socketed.btn-socketed-linked:disabled, .btn-socketed.btn-socketed-linked:disabled:hover {
  border-color: var(--dh-color-action-disabled-border);
  background-color: var(--dh-color-action-disabled-bg);
}
.btn-socketed.btn-socketed-linked:disabled::after, .btn-socketed.btn-socketed-linked:disabled:hover::after {
  background-color: var(--dh-color-accent-down-bg);
  border-color: var(--dh-color-action-disabled-border);
}

.btn-socketed.is-invalid,
.btn-socketed.btn-socketed-linked.is-invalid {
  border-color: color-mix(in srgb, var(--dh-color-negative) 85%, transparent);
}
.btn-socketed.is-invalid::after,
.btn-socketed.btn-socketed-linked.is-invalid::after {
  border-color: var(--dh-color-negative-bg);
  background-color: var(--dh-color-negative-bg);
}
.btn-socketed.is-invalid .btn-socketed-icon.linked,
.btn-socketed.btn-socketed-linked.is-invalid .btn-socketed-icon.linked {
  display: none;
}
.btn-socketed.is-invalid .btn-socketed-icon.is-invalid,
.btn-socketed.btn-socketed-linked.is-invalid .btn-socketed-icon.is-invalid {
  color: var(--dh-color-action-bg);
  display: block;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 9px);
  z-index: 1;
}
.btn-socketed.is-invalid:focus,
.btn-socketed.btn-socketed-linked.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-negative) 35%, transparent);
}
.btn-socketed.is-invalid:disabled, .btn-socketed.is-invalid:disabled:hover,
.btn-socketed.btn-socketed-linked.is-invalid:disabled,
.btn-socketed.btn-socketed-linked.is-invalid:disabled:hover {
  border-color: var(--dh-color-action-disabled-border);
  background-color: var(--dh-color-action-disabled-bg);
}
.btn-socketed.is-invalid:disabled::after, .btn-socketed.is-invalid:disabled:hover::after,
.btn-socketed.btn-socketed-linked.is-invalid:disabled::after,
.btn-socketed.btn-socketed-linked.is-invalid:disabled:hover::after {
  background-color: var(--dh-color-action-disabled-bg);
  border-color: var(--dh-color-action-disabled-border);
}

/*# sourceMappingURL=SocketedButton.css.map */