:root {
  --ring-outline-width: 2px;
  --ring-outline-offset: 2px;
  --ring-outline-color: var(--color-content-primary);

  &.np-theme-personal,
  & .np-theme-personal {
    --ring-outline-color: var(--color-interactive-primary);
  }
}

.ring() {
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
  outline-offset: var(--ring-outline-offset);
}

.focus-ring {
  &:focus {
    outline: none;
  }

  &:focus-visible {
    .ring();
  }
}

details,
summary,
a,
button,
input,
option,
dialog,
input,
select,
textarea {
  .focus-ring();
}

.ring-offset-0 {
  --ring-outline-offset: 0;
}

.ring-inset {
  --ring-outline-width: 3px;
  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
}

.ring-negative {
  --ring-outline-color: var(--color-sentiment-negative);
}