.np-circular-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.np-circular-btn .tw-icon {
  position: absolute;
  top: 16px;
  top: var(--size-16);
  pointer-events: none;
  color: white;
  transition: color 0.15s ease-in-out;
  width: 100%;
  left: 0;
}
[dir="rtl"] .np-circular-btn .tw-icon {
  right: 0;
  left: auto;
  left: initial;
}
@media (max-width: 320px) {
  .np-circular-btn .tw-icon {
    top: 8px;
    top: var(--size-8);
  }
}
.np-circular-btn .tw-icon > svg {
  margin: 0 auto;
}
.np-theme-personal .np-circular-btn {
  /* stylelint-disable-next-line no-duplicate-selectors */
}
.np-theme-personal .np-circular-btn .tw-icon,
.np-theme-personal .np-circular-btn .tw-icon:hover,
.np-theme-personal .np-circular-btn .tw-icon:active {
  color: var(--color-interactive-control);
}
.np-theme-personal .np-circular-btn.negative .tw-icon,
.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
  color: var(--color-contrast) !important;
}
.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
  color: var(--color-sentiment-negative) !important;
}
.np-circular-btn.accent .np-circular-btn__label {
  color: #00a2dd;
  color: var(--color-interactive-accent);
}
.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
  color: #008fc9;
  color: var(--color-interactive-accent-hover);
}
.np-circular-btn.accent:active .np-circular-btn__label,
.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
  color: #0081ba;
  color: var(--color-interactive-accent-active);
}
.np-circular-btn.accent.secondary .tw-icon {
  color: #00a2dd;
  color: var(--color-interactive-accent);
}
.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
  color: white;
}
.np-circular-btn.positive .np-circular-btn__label {
  color: #2ead4b;
  color: var(--color-interactive-positive);
}
.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
  color: #069939;
  color: var(--color-interactive-positive-hover);
}
.np-circular-btn.positive:active .np-circular-btn__label,
.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
  color: #008b2b;
  color: var(--color-interactive-positive-active);
}
.np-circular-btn.positive.secondary .tw-icon {
  color: #2ead4b;
  color: var(--color-interactive-positive);
}
.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
  color: white;
}
.np-circular-btn.negative .np-circular-btn__label {
  color: #e74848;
  color: var(--color-interactive-negative);
}
.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
  color: #d03238;
  color: var(--color-interactive-negative-hover);
}
.np-circular-btn.negative:active .np-circular-btn__label,
.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
  color: #bf1e2c;
  color: var(--color-interactive-negative-active);
}
.np-circular-btn.negative.secondary .tw-icon {
  color: #e74848;
  color: var(--color-interactive-negative);
}
.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
  color: white;
}
.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
  color: var(--color-interactive-primary);
}
.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
  color: var(--color-interactive-primary-hover);
}
.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
  color: var(--color-interactive-primary-active);
}
.np-theme-personal .np-circular-btn.accent.secondary .tw-icon {
  color: var(--color-interactive-primary);
}
.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
  color: white;
  color: var(--color-interactive-control);
}
.np-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
  color: var(--color-interactive-control);
}
.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
  color: var(--color-interactive-primary);
}
.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
  color: var(--color-interactive-primary-hover);
}
.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
  color: var(--color-interactive-primary-active);
}
.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
  color: var(--color-interactive-primary);
}
.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
  color: white;
  color: var(--color-interactive-control);
}
.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
  color: var(--color-interactive-control);
}
.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
  color: var(--color-sentiment-negative);
}
.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
  color: var(--color-sentiment-negative-hover);
}
.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
  color: var(--color-sentiment-negative-active);
}
.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
  color: var(--color-sentiment-negative);
}
.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
  color: white;
  color: var(--color-interactive-control);
}
.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
  color: var(--color-interactive-control);
}
