@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
@import "./_button-label-states.less";

.np-circular-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;

  .tw-icon {
    position: absolute;
    top: var(--size-16);
    pointer-events: none;
    color: white;
    transition: color 0.15s ease-in-out;
    width: 100%;
    .left(0);

    @media (--screen-400-zoom) {
      top: var(--size-8);
    }

    > svg {
      margin: 0 auto;
    }
  }

  .np-theme-personal & {
    /* stylelint-disable-next-line no-duplicate-selectors */
    .tw-icon {
      &,
      &:hover,
      &:active {
        color: var(--color-interactive-control);
      }
    }

    &.negative .tw-icon,
    &.negative.secondary:not(.disabled, :disabled):hover .tw-icon,
    &.negative.secondary:not(.disabled, :disabled):active .tw-icon {
      // TODO, this will need to be removed when we update our CSS architecture
      color: var(--color-contrast) !important;
    }

    &.negative.secondary:not(.disabled, :disabled) .tw-icon {
      // TODO, this will need to be removed when we update our CSS architecture
      color: var(--color-sentiment-negative) !important;
    }
  }
}

.button-label-states(
  np-circular-btn,
  accent,
  var(--color-interactive-accent),
  var(--color-interactive-accent-hover),
  var(--color-interactive-accent-active)
);

.button-label-states(
  np-circular-btn,
  positive,
  var(--color-interactive-positive),
  var(--color-interactive-positive-hover),
  var(--color-interactive-positive-active)
);

.button-label-states(
  np-circular-btn,
  negative,
  var(--color-interactive-negative),
  var(--color-interactive-negative-hover),
  var(--color-interactive-negative-active)
);

.np-theme-personal {
  .button-label-states(
    np-circular-btn,
    accent,
    var(--color-interactive-primary),
    var(--color-interactive-primary-hover),
    var(--color-interactive-primary-active),
    true
  );

  .button-label-states(
    np-circular-btn,
    positive,
    var(--color-interactive-primary),
    var(--color-interactive-primary-hover),
    var(--color-interactive-primary-active),
    true
  );

  .button-label-states(
    np-circular-btn,
    negative,
    var(--color-sentiment-negative),
    var(--color-sentiment-negative-hover),
    var(--color-sentiment-negative-active),
    true
  );
}
