@import (reference) "../variables/neptune-tokens.less";
@import (reference) "../variables/legacy-variables.less";
@import "./mixins/_buttons.less";
@import "./mixins/_tab-focus.less";
@import "./mixins/_links.less";
@import (reference) "./mixins/_logical-properties.less";
@import (reference) "./core/_typography.less";
@import (reference) "./ring.less";

.btn {
  .np-text-body-large-bold;

  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  // @TODO Remove?
  // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding-bottom: 10px;
  font-weight: var(--font-weight-semi-bold);

  .button-size(
    var(--btn-padding);
    var(--font-size-16);
    var(--line-height-24);
    var(--btn-radius-base);
    var(--btn-height);
  );

  .np-theme-personal & {
    font-size: @btn-font-size;
    line-height: @btn-line-height;
  }

  user-select: none;

  &:not(.disabled, :disabled, .np-dropdown-toggle):focus-visible,
  &:not(.disabled, :disabled, .np-dropdown-toggle).focus {
    &.btn-negative {
      .np-theme-personal & {
        outline-color: var(--color-sentiment-negative);
      }

      .np-theme-personal .critical-comms--cta & {
        outline-color: var(--color-contrast);
      }
    }
  }

  &:not(.disabled, :disabled, .np-dropdown-toggle) {
    &.btn-negative {
      .np-theme-personal .critical-comms--cta & {
        border: none;
      }
    }
  }

  &.btn-negative:not(.disabled, :disabled, .np-dropdown-toggle) {
    &:focus,
    &.focus {
      .np-theme-personal & {
        outline-color: var(--color-sentiment-negative);
      }
    }
  }

  &:not(.disabled, :disabled, .btn-loading):hover {
    color: var(--color-interactive-accent-hover);
    text-decoration: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    outline: none;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
  }

  a& {
    &.disabled,
    fieldset[disabled] & {
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

// Button variants

// @TODO Deprecate / Remove
.btn-default {
  .button-variant(
    var(--color-content-accent);
    #FFF;
    transparent;
    var(--color-interactive-accent-hover);
    var(--color-interactive-accent-active);
    var(--color-interactive-accent);
    var(--color-interactive-accent-hover);
    var(--color-interactive-accent-active);
    #FFF
  );
  .np-theme-personal & {
    .button-variant(
      var(--color-interactive-control);
      var(--color-interactive-control);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-interactive-accent-hover);
      var(--color-interactive-control);
    );

    &.btn-priority-2 {
      .button-variant(
        var(--color-interactive-primary);
        var(--color-interactive-control);
        transparent;
        var(--color-interactive-accent-hover);
        var(--color-interactive-accent-active);
        var(--color-interactive-primary);
        var(--color-interactive-accent-hover);
        var(--color-interactive-accent-active);
        transparent;
        var(--color-interactive-control);
      );
    }
  }
}

// @DEPRECATED: .btn-primary (use Button component with type Accent)
.btn-accent,
.btn-primary {
  .button-variant(
    #fff;
    #fff;
    var(--color-interactive-accent);
    var(--color-interactive-accent-hover);
    var(--color-interactive-accent-active);
    var(--color-interactive-accent);
    var(--color-interactive-accent-hover);
    var(--color-interactive-accent-active);
  );

  &.btn-priority-2 {
    .button-variant(
      var(--color-interactive-accent);
      #fff;
      transparent;
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-background-screen);
      #fff;
    );
  }

  .np-theme-personal & {
    .button-variant(
      var(--color-interactive-control);
      var(--color-interactive-control);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-interactive-accent-hover);
      var(--color-interactive-control);
    );

    &.btn-priority-2 {
      .button-variant(
        var(--color-interactive-primary);
        var(--color-interactive-control);
        transparent;
        var(--color-interactive-accent-hover);
        var(--color-interactive-accent-active);
        var(--color-interactive-primary);
        var(--color-interactive-accent-hover);
        var(--color-interactive-accent-active);
        transparent;
        var(--color-interactive-control);
      );
    }
  }
}

// @DEPRECATED:.btn-link (use Button component with type Accent / priority Tertiary)
.btn-link,
.btn-accent:not(.disabled, :disabled).btn-priority-3 {
  color: var(--color-content-accent);
  text-decoration: underline;
  border-color: transparent;

  &,
  &:not(.disabled, :disabled):active,
  &:not(.disabled, :disabled).active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
  }

  &:not(.disabled, :disabled, .btn-loading):hover,
  &:not(.disabled, :disabled):focus-visible {
    color: var(--color-content-accent-hover);
    text-decoration: underline;
    border-color: transparent;
    background-color: transparent;
  }

  &:not(.disabled, :disabled, .btn-loading):active {
    color: var(--color-content-accent-active);
  }

  .np-theme-personal & {
    color: var(--color-interactive-primary);
    border-color: transparent;
    .link-underline();

    &:not(.disabled, :disabled, .btn-loading):hover,
    &:not(.disabled, :disabled):focus-visible {
      color: var(--color-interactive-primary-hover);
      border-color: transparent;
    }

    &:not(.disabled, :disabled, .btn-loading):active {
      color: var(--color-interactive-primary-active);
      background-color: var(--color-background-screen-active) !important;
    }
  }
}

.btn-accent.disabled.btn-priority-3,
.btn-accent.btn-priority-3:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--color-content-accent);
  text-decoration: underline;

  .np-theme-personal & {
    .link-underline();
  }
}

// @DEPRECATED:.btn-success (use Button component with type Positive)
.btn-positive,
.btn-success {
  .button-variant(
    #fff;
    #fff;
    var(--color-interactive-positive);
    var(--color-interactive-positive-hover);
    var(--color-interactive-positive-active);
    var(--color-interactive-positive);
    var(--color-interactive-positive-hover);
    var(--color-interactive-positive-active);
  );

  &.btn-priority-2 {
    .button-variant(
      var(--color-interactive-positive);
      #fff;
      transparent;
      var(--color-interactive-positive-hover);
      var(--color-interactive-positive-active);
      var(--color-interactive-positive);
      var(--color-interactive-positive-hover);
      var(--color-interactive-positive-active);
      var(--color-background-screen);
      #fff;
    );
  }

  .np-theme-personal & {
    .button-variant(
      var(--color-interactive-control);
      var(--color-interactive-control);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-accent-active);
      var(--color-interactive-accent);
      var(--color-interactive-accent);
      var(--color-interactive-accent);
      var(--color-interactive-accent-hover);
      var(--color-interactive-control);
    );

    &.btn-priority-2 {
      .button-variant(
        var(--color-interactive-primary);
        var(--color-interactive-control);
        transparent;
        var(--color-interactive-accent-hover);
        var(--color-interactive-accent-active);
        var(--color-interactive-primary);
        var(--color-interactive-accent-hover);
        var(--color-interactive-accent-active);
        transparent;
        var(--color-interactive-control);
      );
    }
  }
}

// @TODO Deprecate / Remove
.btn-info {
  .button-variant(
    @btn-info-color;
    #FFF;
    @btn-info-bg;
    @btn-info-bg-hover;
    @btn-info-bg-active;
    @btn-info-border;
    @btn-info-border-hover;
    @btn-info-border-active;
    #FFF
  );
}

// @TODO Deprecate / Remove
.btn-warning {
  .button-variant(
    @btn-warning-color;
    #FFF;
    @btn-warning-bg;
    @btn-warning-bg-hover;
    @btn-warning-bg-active;
    @btn-warning-border;
    @btn-warning-border-hover;
    @btn-warning-border-active;
    #FFF
  );
}

// @DEPRECATED: .btn-danger (use Button component with type Negative)
.btn-danger,
.btn-negative {
  .button-variant(
    #fff;
    #fff;
    var(--color-interactive-negative);
    var(--color-interactive-negative-hover);
    var(--color-interactive-negative-active);
    var(--color-interactive-negative);
    var(--color-interactive-negative-hover);
    var(--color-interactive-negative-active);
  );

  &.btn-priority-2 {
    .button-variant(
      var(--color-interactive-negative);
      #fff;
      transparent;
      var(--color-interactive-negative-hover);
      var(--color-interactive-negative-active);
      var(--color-interactive-negative);
      var(--color-interactive-negative-hover);
      var(--color-interactive-negative-active);
      var(--color-background-screen);
      #fff;
    );
  }

  .np-theme-personal & {
    .button-variant(
      var(--color-contrast);
      var(--color-contrast);
      var(--color-sentiment-negative);
      var(--color-sentiment-negative-hover);
      var(--color-sentiment-negative-active);
      var(--color-sentiment-negative);
      var(--color-sentiment-negative-hover);
      var(--color-sentiment-negative-active);
      var(--color-sentiment-negative);
      var(--color-contrast);
    );

    &.btn-priority-2 {
      .button-variant(
        var(--color-sentiment-negative);
        var(--color-contrast);
        transparent;
        var(--color-sentiment-negative-hover);
        var(--color-sentiment-negative-active);
        var(--color-sentiment-negative);
        var(--color-sentiment-negative-hover);
        var(--color-sentiment-negative-active);
        transparent;
        var(--color-contrast);
      );
    }
  }
}

// @TODO Deprecate / Remove
.bootstrap-select .btn-default,
.btn-input {
  .button-variant(
    var(--color-content-primary);
    var(--color-content-primary);
    var(--color-background-screen);
    var(--color-background-screen);
    var(--color-background-screen);
    var(--color-interactive-secondary);
    var(--color-interactive-secondary-hover);
    var(--color-interactive-secondary-active);
  );
}

// @TODO Deprecate / Remove
.btn-image {
  background-color: @brand-grey-plus-10;
  background-color: rgba(255, 255, 255, 0.4);
  color: @brand-white;

  &:not(.disabled, :disabled):hover,
  &:not(.disabled, :disabled):focus-visible {
    background-color: @brand-grey-plus-10;
    background-color: rgba(24, 33, 56, 0.56);
  }

  &:not(.disabled, :disabled):active,
  &:not(.disabled, :disabled):hover:active {
    background: @brand-grey-minus-20;
  }
}

.btn-input .caret {
  .margin(left, var(--size-8));
}

// @TODO Deprecate / Remove
.btn-inverse {
  .button-outline(
    #fff;
    #e2e6e8;
    #5d7079;
  );
}

// Sizes
.btn-lg {
  .button-size(
    var(--btn-lg-padding);
    var(--font-size-18);
    var(--line-height-28);
    var(--btn-lg-radius-base);
    var(--btn-lg-height)
  );

  .np-theme-personal & {
    font-size: @btn-lg-font-size;
    line-height: @btn-lg-line-height;
  }

  .btn-loader {
    margin-top: 2px;
  }
}

.btn-sm,
.navbar .btn {
  .button-size(
    var(--btn-sm-padding);
    var(--font-size-14);
    var(--line-height-22);
    var(--btn-sm-radius-base);
    var(--btn-sm-height);
  );

  .np-theme-personal & {
    font-size: @btn-sm-font-size;
    line-height: @btn-sm-line-height;
  }
}

.btn-xs {
  .button-size(
    var(--btn-xs-padding);
    var(--font-size-12);
    var(--line-height-20);
    var(--btn-sm-radius-base);
    @btn-xs-height
  );

  .np-theme-personal & {
    font-size: @btn-xs-font-size;
    line-height: @btn-xs-line-height;

    .btn-loader {
      margin-left: calc(var(--padding-x-small) / 2) !important;
      height: @btn-xs-line-height;
      background-size: @btn-xs-font-size @btn-xs-font-size !important;
    }
  }
}

@media (max-width: (@grid-float-breakpoint - 1px)) {
  .navbar-collapse .btn {
    .button-size(
      var(--btn-padding);
      var(--font-size-16);
      var(--line-height-24);
      var(--border-radius-base);
      var(--btn-height);
    );

    .np-theme-personal & {
      font-size: @btn-font-size;
      line-height: @btn-line-height;

      max-height: var(--btn-height);
    }
  }
}

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

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: var(--size-8);
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

// @TODO Deprecate / Remove
.btn-input {
  font-weight: var(--font-weight-regular);
  .padding(left, @padding-base-horizontal);

  .padding(right, @padding-base-horizontal);

  &:not(.disabled, :disabled):hover {
    border-color: var(--color-interactive-secondary-hover);
  }

  &:not(.disabled, :disabled).active,
  &:not(.disabled, :disabled):active,
  &:not(.disabled, :disabled).focus,
  &:not(.disabled, :disabled):focus-visible {
    border-color: var(--color-interactive-accent-active);
    outline: 0 none !important;

    .np-theme-personal & {
      border-color: var(--color-interactive-secondary-active);
    }
  }

  // stylelint-disable-next-line no-duplicate-selectors
  .caret {
    color: var(--color-content-accent);
  }

  &.btn-sm {
    .padding(left, 12px);

    .padding(right, 12px);
  }

  &.btn-lg {
    font-size: var(--font-size-20);

    &.btn-addon,
    &.btn-input-inverse {
      font-weight: var(--font-weight-semi-bold);
    }
  }
}

// @TODO Deprecate / Remove
// input-inverse is deprecated, remove after styleguide-components updated
.btn-input-inverse {
  --color-content-primary: @color-navy-content-primary;
  --color-content-accent: @color-navy-content-accent;
}

.btn-input-inverse,
.btn-addon {
  .button-variant(
    @color-navy-content-primary;
    @color-navy-content-primary;
    @color-navy-background-screen;
    @color-navy-background-screen;
    @color-navy-background-screen;
    @color-navy-background-elevated;
    @color-navy-background-screen;
    @color-navy-background-screen;
    var(--color-background-screen);
  );
}

// @TODO Deprecate / Remove
// Remove bootstrap-select rules after checking tw-currency-select
.form-group-sm {
  .bootstrap-select .btn-default {
    padding: @padding-small-vertical @padding-small-horizontal;
  }
}

.form-group-lg {
  .bootstrap-select .btn-default {
    padding: @padding-large-vertical @padding-large-horizontal;
  }
}
// @TODO Deprecate / Remove
.bootstrap-select.open > .dropdown-toggle.btn-default {
  border-color: var(--color-interactive-accent);
  background-color: var(--color-background-screen);
  color: var(--color-content-primary);
}

.btn-loader {
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-bottom: -8px;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-loading {
  cursor: wait;

  &:not(.btn-block) {
    display: inline-flex;
    align-items: center;

    .btn-loader {
      margin-bottom: 0;

      :not([dir="rtl"]) & {
        margin-left: 16px;
        margin-right: 0;
      }

      [dir="rtl"] & {
        margin-left: 0 !important;
        margin-right: 16px !important;
      }
    }
  }

  &.btn-block .btn-loader {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }

  &:hover,
  &:focus,
  &:active,
  & {
    .process-circle[class] {
      stroke: currentColor;
    }
  }
}

.btn-sm {
  .btn-loader {
    background-size: 16px 16px;

    .np-theme-personal & {
      margin-left: calc(var(--padding-small) / 2) !important;
    }
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.btn-input.btn {
  .text-align(left);

  .tw-icon {
    position: absolute;
    .right(var(--size-16));

    &:not(.tw-chevron, .tw-icon-chevron-down) {
      position: initial;
    }

    top: var(--size-16);
  }

  &.btn-sm .tw-icon {
    .right(var(--size-8));

    top: var(--size-8);
  }

  &.btn-lg .tw-icon {
    top: 27px;
  }
}

// stylelint-disable-next-line no-duplicate-selectors
a.btn {
  text-decoration: none;
}

.btn-unstyled {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}