/*
* Button component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

:root {
  --button-icon-size: 1rem;
  --button-height: 2.5rem;
}

.dnb-button {
  // Base variables
  --button-color-text: var(--button-color-text--default);
  --button-color-icon: var(--button-color-icon--default);
  --button-color-bg: var(--button-color-bg--default);
  --button-color-border: var(--button-color-border--default);
  --button-color-underline: var(--button-color-underline--default);
  --button-border-inset: var(--button-border-inset--default);

  // Template modifiers
  --button-border-inset--default: inset;
  --button-border-inset--hover: ; // Need empty value to override default `inset`
  --button-border-inset--focus: ; // Need empty value to override default `inset`

  // Old variables
  --button-font-size: var(--font-size-basis);
  --button-font-size-small: var(--font-size-small);
  --button-icon-size--small: 0.75rem;
  --button-icon-size--medium: 1.5rem;
  --button-icon-size--large: 2rem;
  --button-icon-gutter: 0.5rem;
  --button-width: 2.5rem;
  --button-width--small: 1.5rem;
  --button-height--small: 1.5rem;
  --button-width--medium: 2rem;
  --button-height--medium: 2rem;
  --button-width--large: 3rem;
  --button-height--large: 3rem;
  --button-border-width: var(--button-border-width--default);
  --button-border-width--default: 0.0625rem;
  --button-border-width--hover: 0.125rem;
  --button-border-width--focus: var(--focus-ring-width);
  --button-border-radius: var(--token-radius-xl);
  // Should match input border radius
  --button-border-radius--control-button: var(--token-radius-sm);
  --button-padding-left: 0;
  --button-padding-right: 0;
  --button-padding-icon: 1rem;
  --button-padding--default: 1.5rem;
  --button-padding--small: 1rem;
  --button-padding--medium: 1rem;
  --button-padding--large: 2rem;
  --button-icon-margin-top: 0;
  --button-icon-margin-left: 0;
  --button-icon-margin-right: 0;

  position: relative;

  cursor: pointer;
  white-space: nowrap;

  &--wrap {
    overflow-wrap: break-word;
    white-space: normal;
  }

  &__icon {
    margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0
      var(--button-icon-margin-left);
  }

  &--primary,
  &--secondary,
  &--tertiary {
    // Template base
    color: var(--button-color-text, var(--button-color-text--default));
    background-color: var(
      --button-color-bg,
      var(--button-color-bg--default)
    );

    .dnb-button__icon {
      color: var(--button-color-icon, var(--button-color-icon--default));
    }

    // Template modifiers
    @include utilities.hover() {
      --button-color-bg: var(--button-color-bg--hover);
      --button-color-border: var(--button-color-border--hover);
      --button-color-icon: var(--button-color-icon--hover);
      --button-color-text: var(--button-color-text--hover);
      --button-color-underline: var(--button-color-underline--hover);
      --button-border-inset: var(--button-border-inset--hover);
      --button-border-width: var(--button-border-width--hover);
      --button-input-separator-color: var(
        --button-input-separator-color--hover
      );
    }

    @include utilities.active() {
      --button-color-bg: var(--button-color-bg--active);
      --button-color-border: var(--button-color-border--active);
      --button-color-icon: var(--button-color-icon--active);
      --button-color-text: var(--button-color-text--active);
      --button-color-underline: var(--button-color-underline--active);
      --button-border-inset: var(--button-border-inset--active);
      --button-border-width: var(--button-border-width--active);
      --button-input-separator-color: var(
        --button-input-separator-color--active
      );
    }

    @include utilities.focusVisible() {
      --button-color-bg: var(--token-color-background-action-focus-subtle);
      --button-color-border: var(--token-color-stroke-action-focus);
      --button-color-icon: var(--token-color-icon-action-focus);
      --button-color-text: var(--token-color-text-action-focus);
      --button-color-underline: var(--button-color-underline--focus);
      --button-border-inset: var(--button-border-inset--focus);
      --button-border-width: var(--button-border-width--focus);
      --button-input-separator-color: var(
        --button-input-separator-color--focus
      );

      outline: none;
    }

    &[disabled] {
      --button-color-bg: var(--button-color-bg--disabled);
      --button-color-border: var(--button-color-border--disabled);
      --button-color-icon: var(--button-color-icon--disabled);
      --button-color-text: var(--button-color-text--disabled);
      --button-input-separator-color: var(
        --button-input-separator-color--disabled
      );
    }
  }

  &--primary,
  &--secondary,
  &--tertiary::before {
    // Template base
    @include utilities.fakeBorder(
      var(--button-color-border, var(--button-color-border--default)),
      var(--button-border-width, var(--button-border-width--default)),
      var(--button-border-inset, var(--button-border-inset--default))
    );
  }

  // Primary button
  &--primary {
    // Background
    --button-color-bg--default: var(
      --token-color-component-button-background-action
    );
    --button-color-bg--hover: var(
      --token-color-component-button-background-action-hover
    );
    --button-color-bg--active: var(
      --token-color-background-action-pressed
    );
    --button-color-bg--disabled: var(
      --token-color-background-action-disabled
    );

    // Border
    --button-color-border--hover: var(
      --token-color-component-button-stroke-action-hover
    );

    // Icon
    --button-color-icon--default: var(
      --token-color-component-button-icon-neutral
    );
    --button-color-icon--disabled: var(
      --token-color-component-button-icon-action-disabled
    );

    // Text
    --button-color-text--default: var(
      --token-color-component-button-text-neutral
    );
    --button-color-text--disabled: var(
      --token-color-component-button-text-action-disabled
    );

    &.dnb-button--surface-dark {
      // Background
      --button-color-bg--default: var(
        --token-color-background-action-ondark
      );
      --button-color-bg--hover: var(
        --token-color-background-action-hover-ondark
      );
      --button-color-bg--active: var(
        --token-color-background-action-pressed-ondark
      );
      --button-color-bg--disabled: var(
        --token-color-background-action-disabled-ondark
      );

      // Border
      --button-color-border--hover: var(
        --token-color-stroke-action-hover-ondark
      );

      // Icon
      --button-color-icon--default: var(
        --token-color-component-button-icon-neutral-ondark
      );
      --button-color-icon--disabled: var(
        --token-color-icon-action-disabled-ondark
      );

      // Text
      --button-color-text--default: var(
        --token-color-component-button-text-neutral-ondark
      );
      --button-color-text--disabled: var(
        --token-color-text-action-disabled-ondark
      );
    }
    &.dnb-button__status--error {
      // Background
      --button-color-bg--default: var(
        --token-color-component-button-background-action-destructive
      );
      --button-color-bg--hover: var(
        --token-color-component-button-background-action-destructive-hover
      );
      --button-color-bg--active: var(
        --token-color-component-button-background-action-destructive-pressed
      );

      // Border
      --button-color-border--hover: var(
        --token-color-component-button-stroke-action-destructive-hover
      );

      // Icon
      --button-color-icon--default: var(
        --token-color-component-button-icon-neutral-destructive
      );

      // Text
      --button-color-text--default: var(
        --token-color-component-button-text-neutral-destructive
      );
    }
  }

  // Secondary button
  &--secondary {
    // Background
    --button-color-bg--default: var(--token-color-background-neutral);
    --button-color-bg--hover: var(
      --token-color-background-action-hover-subtle
    );
    --button-color-bg--active: var(
      --token-color-background-action-pressed-subtle
    );
    --button-color-bg--disabled: var(--token-color-background-neutral);

    // Border
    --button-color-border--default: var(
      --token-color-component-button-stroke-action
    );
    --button-color-border--hover: var(
      --token-color-component-button-stroke-action-hover
    );
    --button-color-border--active: var(
      --token-color-stroke-action-pressed
    );
    --button-color-border--disabled: var(
      --token-color-stroke-action-disabled
    );

    // Icon
    --button-color-icon--default: var(
      --token-color-component-button-icon-action
    );
    --button-color-icon--hover: var(
      --token-color-component-button-icon-action-hover
    );
    --button-color-icon--active: var(--token-color-icon-action-pressed);
    --button-color-icon--disabled: var(--token-color-icon-action-disabled);

    // Text
    --button-color-text--default: var(
      --token-color-component-button-text-action
    );
    --button-color-text--hover: var(
      --token-color-component-button-text-action-hover
    );
    --button-color-text--active: var(--token-color-text-action-pressed);
    --button-color-text--disabled: var(--token-color-text-action-disabled);

    &.dnb-button--icon-only {
      // Border
      --button-color-border--default: var(--token-color-stroke-action);
      --button-color-border--hover: var(--token-color-stroke-action-hover);
      --button-color-border--active: transparent;

      // Icon
      --button-color-icon--default: var(--token-color-icon-action);
      --button-color-icon--hover: var(--token-color-icon-action-hover);
    }

    &.dnb-button--surface-dark {
      // Background
      --button-color-bg--default: transparent; // TODO: might have some a11y issues, will discuss with UX
      --button-color-bg--hover: var(
        --token-color-background-action-hover-subtle-ondark
      );
      --button-color-bg--active: var(
        --token-color-background-action-pressed-subtle-ondark
      );
      --button-color-bg--disabled: transparent; // TODO: might have some a11y issues, will discuss with UX

      // Border
      --button-color-border--default: var(
        --token-color-stroke-action-ondark
      );
      --button-color-border--hover: var(
        --token-color-stroke-action-hover-ondark
      );
      --button-color-border--active: var(
        --token-color-stroke-action-pressed-ondark
      );
      --button-color-border--disabled: var(
        --token-color-stroke-action-disabled-ondark
      );

      // Icon
      --button-color-icon--default: var(--token-color-icon-action-ondark);
      --button-color-icon--hover: var(
        --token-color-icon-action-hover-ondark
      );
      --button-color-icon--active: var(
        --token-color-icon-action-pressed-ondark
      );
      --button-color-icon--disabled: var(
        --token-color-icon-action-disabled-ondark
      );

      // Text
      --button-color-text--default: var(--token-color-text-action-ondark);
      --button-color-text--hover: var(
        --token-color-text-action-hover-ondark
      );
      --button-color-text--active: var(
        --token-color-text-action-pressed-ondark
      );
      --button-color-text--disabled: var(
        --token-color-text-action-disabled-ondark
      );
    }

    &.dnb-button__status--error {
      // Background
      --button-color-bg--default: var(--token-color-background-neutral);
      --button-color-bg--hover: var(
        --token-color-component-button-background-action-destructive-hover-subtle
      );
      --button-color-bg--active: var(
        --token-color-component-button-background-action-destructive-pressed-subtle
      );

      // Border
      --button-color-border--default: var(
        --token-color-component-button-stroke-action-destructive
      );
      --button-color-border--hover: var(
        --token-color-component-button-stroke-action-destructive-hover
      );
      --button-color-border--active: var(
        --token-color-component-button-stroke-action-destructive-pressed
      );

      // Icon
      --button-color-icon--default: var(
        --token-color-component-button-icon-action-destructive
      );
      --button-color-icon--hover: var(
        --token-color-component-button-icon-action-destructive-hover
      );
      --button-color-icon--active: var(
        --token-color-component-button-icon-action-destructive-pressed
      );

      // Text
      --button-color-text--default: var(
        --token-color-component-button-text-action-destructive
      );
      --button-color-text--hover: var(
        --token-color-component-button-text-action-destructive-hover
      );
      --button-color-text--active: var(
        --token-color-component-button-text-action-destructive-pressed
      );
    }
  }

  // Tertiary button
  &--tertiary {
    > * {
      z-index: 2;
    }

    &::before {
      content: '';
      position: absolute;
      z-index: 1; // to be visible in other absolute contexts
      top: 0;
      left: var(--button-tertiary-focus-left);
      bottom: 0;
      right: var(--button-tertiary-focus-right);

      background-color: inherit;
      height: inherit;
      border-radius: inherit;

      .dnb-skeleton & {
        content: none;
      }
    }

    // Icon
    --button-color-icon--default: var(--token-color-icon-action);
    --button-color-icon--hover: var(--token-color-icon-action-hover);
    --button-color-icon--active: var(--token-color-icon-action-pressed);
    --button-color-icon--disabled: var(--token-color-icon-action-disabled);

    // Text
    --button-color-text--default: var(--token-color-text-action);
    --button-color-text--hover: var(--token-color-text-action-hover);
    --button-color-text--active: var(--token-color-text-action-pressed);
    --button-color-text--disabled: var(--token-color-text-action-disabled);

    // Underline
    --button-color-underline--default: transparent;
    --button-color-underline--hover: var(
      --token-color-background-action-hover
    );

    &.dnb-button--icon-only {
      // Background
      --button-color-bg--hover: var(
        --token-color-background-action-hover-subtle
      );
      --button-color-bg--active: var(
        --token-color-background-action-pressed-subtle
      );
    }

    &.dnb-button--surface-dark {
      // Icon
      --button-color-icon--default: var(--token-color-icon-action-ondark);
      --button-color-icon--hover: var(
        --token-color-icon-action-hover-ondark
      );
      --button-color-icon--active: var(
        --token-color-icon-action-pressed-ondark
      );
      --button-color-icon--disabled: var(
        --token-color-icon-action-disabled-ondark
      );

      // Text
      --button-color-text--default: var(--token-color-text-action-ondark);
      --button-color-text--hover: var(
        --token-color-text-action-hover-ondark
      );
      --button-color-text--active: var(
        --token-color-text-action-pressed-ondark
      );
      --button-color-text--disabled: var(
        --token-color-text-action-disabled-ondark
      );

      // Underline
      --button-color-underline--hover: var(
        --token-color-icon-action-hover-ondark
      );
    }

    &.dnb-button__status--error {
      // Icon
      --button-color-icon--default: var(
        --token-color-component-button-icon-action-destructive
      );
      --button-color-icon--hover: var(
        --token-color-component-button-icon-action-destructive-hover
      );
      --button-color-icon--active: var(
        --token-color-component-button-icon-action-destructive-pressed
      );

      // Text
      --button-color-text--default: var(
        --token-color-component-button-text-action-destructive
      );
      --button-color-text--hover: var(
        --token-color-component-button-text-action-destructive-hover
      );
      --button-color-text--active: var(
        --token-color-component-button-text-action-destructive-pressed
      );

      // Underline
      --button-color-underline--hover: var(
        --token-color-component-button-background-action-destructive-hover
      );
    }
  }

  &--icon-only {
    &.dnb-button--selected {
      --button-color-bg--default: var(
        --token-color-background-selected-subtle
      );
      --button-color-border--default: var(--token-color-stroke-selected);
      --button-color-icon--default: var(--token-color-icon-selected);
      --button-border-width--default: 0.125rem;
      --button-border-inset--default: ; // Need empty value to override default `inset`
    }

    // Input-button
    &.dnb-button--input-button {
      // Background
      --button-color-bg--default: transparent;
      --button-color-bg--hover: var(--token-color-background-action);
      --button-color-bg--active: var(
        --token-color-background-action-pressed
      );
      --button-color-bg--disabled: var(
        --token-color-background-neutral-subtle
      );

      // Border
      --button-color-border--default: transparent;
      --button-color-border--hover: transparent;
      --button-color-border--active: transparent;
      --button-border-inset--focus: inset;

      // Icon
      --button-color-icon--hover: var(
        --token-color-component-button-icon-neutral
      );
      --button-color-icon--active: var(
        --token-color-component-button-icon-neutral
      );
      --button-color-icon--disabled: var(
        --token-color-icon-action-disabled
      );

      // Text
      --button-color-text--hover: var(
        --token-color-component-button-text-neutral
      );
      --button-color-text--active: var(
        --token-color-component-button-text-neutral
      );
      --button-color-text--disabled: var(
        --token-color-component-button-text-action-disabled
      );

      &.dnb-button__status--error {
        // Background
        --button-color-bg--hover: var(--token-color-background-error);
        --button-color-bg--active: var(
          --token-color-component-button-background-action-destructive-pressed
        );

        // Icon
        --button-color-icon--hover: var(
          --token-color-component-button-icon-neutral-destructive
        );
        --button-color-icon--active: var(
          --token-color-component-button-icon-neutral-destructive
        );

        // Text
        --button-color-text--hover: var(
          --token-color-component-button-text-neutral-destructive
        );
        --button-color-text--active: var(
          --token-color-component-button-text-neutral-destructive
        );
      }

      --button-input-separator-color--default: var(--button-color-text);
      --button-input-separator-color--hover: var(--button-color-bg);
      --button-input-separator-color--active: var(--button-color-bg);
      --button-input-separator-color--focus: var(--button-color-border);
      --button-input-separator-color--disabled: var(
        --token-color-background-action-disabled
      );

      &::after {
        content: '';
        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: var(--input-border-width);
        background-color: var(
          --button-input-separator-color,
          var(--button-input-separator-color--default)
        );
      }

      @include utilities.active() {
        &::after {
          top: var(--input-border-width);
          bottom: var(--input-border-width);
        }
      }
    }
  }

  // we use flex, even if they don't has effect in safari and webkit
  display: inline-flex;
  align-items: center; // centering icons
  justify-content: center; // centering icons

  width: var(--button-width);
  height: auto;
  padding: 0 var(--button-padding-right) 0 var(--button-padding-left);

  border: none;
  border-radius: var(--button-border-radius);

  text-align: left;
  font-size: var(--font-size-small); // reset
  font-weight: var(--font-weight-regular); // reset
  text-decoration: none;

  // Safari needs a correct CSS specificity
  &,
  .dnb-core-style & {
    line-height: var(--button-height);
  }

  &__text {
    margin: 0.5rem 0;
    font-size: var(--button-font-size);
    line-height: var(--line-height-basis);
    color: inherit;

    // vertical alignment
    transform: translateY(-0.03125rem); // 0.5px

    [data-os='linux'] {
      transform: translateY(-0.035rem); // 0.5px
    }
  }

  &__alignment {
    display: inline-block;
    width: 0;
  }

  &__bounding {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    transform: scale(1.1, 1.4);

    background-color: transparent;
    border-radius: var(--button-border-radius);
  }

  // size small
  &--size-small {
    --button-height: var(--button-height--small);
    width: var(--button-width--small);
    font-size: var(--button-font-size-small);
  }
  &--size-small &__text {
    margin: 0;
  }
  &--has-text#{&}--size-small {
    --button-padding-left: var(--button-padding--small);
    --button-padding-right: var(--button-padding--small);
  }

  // size medium
  &--size-medium {
    --button-height: var(--button-height--medium);
    width: var(--button-width--medium);
  }
  &--size-medium &__text {
    margin: 0;
  }
  &--has-text#{&}--size-medium {
    --button-padding-left: var(--button-padding--medium);
    --button-padding-right: var(--button-padding--medium);
  }
  &--control-before#{&}--size-medium {
    line-height: var(--button-height);
  }
  &--control-after#{&}--size-medium {
    line-height: var(--button-height);
  }

  // size large
  &--size-large {
    --button-height: var(--button-height--large);
    --button-padding-icon: 1.5rem;
    width: var(--button-width--large);
  }
  &--has-text#{&}--size-large {
    --button-padding-left: var(--button-padding--large);
    --button-padding-right: var(--button-padding--large);
  }

  // size default

  /* stylelint-disable-next-line */
  &--has-text {
    --button-padding-left: var(--button-padding--default);
    --button-padding-right: var(--button-padding--default);
    width: auto;
  }
  &--has-text#{&}--icon-position-left {
    --button-padding-left: var(--button-padding-icon);
    --button-icon-margin-right: var(--button-icon-gutter);
  }
  &--has-text#{&}--icon-position-right {
    --button-padding-right: var(--button-padding-icon);
    --button-icon-margin-left: var(--button-icon-gutter);
  }

  // Icon sizes
  &--icon-size-small {
    --button-icon-size: var(--button-icon-size--small);
  }
  &--icon-size-medium {
    --button-icon-size: var(--button-icon-size--medium);
  }
  &--icon-size-large {
    --button-icon-size: var(--button-icon-size--large);
  }

  // Default -- icon set to right side
  &--has-text#{&}--has-icon {
    .dnb-button__icon {
      order: 2;
    }
    .dnb-button__text {
      order: 1;
    }
  }

  &:not(.dnb-button--has-text) &__icon {
    width: inherit;
  }
  &__icon.dnb-icon svg:not([width]):not([height]) {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
  }
  [href] > &__icon.dnb-icon {
    // has same as &__text
    // only on a.dnb-button it have to be the same, else the icon will push down the button 1px
    line-height: var(--button-font-size);
  }

  // Button with icon and text - icon on LEFT side
  &--has-text#{&}--has-icon#{&}--icon-position-left,
  &--has-text#{&}--has-icon#{&}--icon-position-top {
    .dnb-button__icon {
      order: 1;
    }
    .dnb-button__text {
      order: 2;
    }
  }

  &--stretch {
    width: 100%;
  }

  &--control-before {
    border-radius: var(--button-border-radius--control-button) 0 0
      var(--button-border-radius--control-button);
  }
  &--control-after {
    border-radius: 0 var(--button-border-radius--control-button)
      var(--button-border-radius--control-button) 0;
  }

  // because we have "appearance: button" in some css resets (not our)
  &[type='button'],
  &[type='reset'],
  &[type='submit'] {
    appearance: none;

    /* stylelint-disable-next-line */
    -moz-appearance: none;

    /* stylelint-disable-next-line */
    -webkit-appearance: none;
  }

  &[disabled] {
    cursor: not-allowed;
    outline: none; // when state goes from enabled to disabled and the focus is set, the outline (Safari) will show up, because it already had focus
  }

  & + .dnb-form-status {
    margin-top: 0.5rem;
  }
}

/* Firefox includes a hidden border which messes up button dimensions */
button.dnb-button::-moz-focus-inner {
  border: none;
}