@import './Button.vars.less';

/* Button Styles */
.wds-Button {
  display: inline-flex;
  flex: none;
  width: auto;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  appearance: none;
  background-color: var(--Button-background);
  border: none;
  border-radius: var(--Button-border-radius);
  color: var(--Button-color);
  cursor: pointer;
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);

  &,
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
    color: var(--Button-color);
  }

  &:hover {
    --Button-color: var(--Button-color-hover);
    background-color: var(--Button-background-hover);
  }

  &:active {
    --Button-color: var(--Button-color-active);
    background-color: var(--Button-background-active);
  }

  &.wds-Button--disabled,
  &:disabled {
    // The declarations below are necessary as design specs for
    // the button's disabled state have changed. This is to be
    // further investigated at a later stage.
    // @see https://transferwise.atlassian.net/browse/DS-7386
    filter: none;
    mix-blend-mode: luminosity;
    opacity: 0.45;
    cursor: not-allowed;

    &,
    &:hover,
    &:active {
      background-color: var(--Button-background);
    }
  }

  // Priority modifiers
  &--secondary {
    --Button-background: var(--Button-secondary-background);
    --Button-background-hover: var(--Button-secondary-background-hover);
    --Button-background-active: var(--Button-secondary-background-active);
    --Button-color: var(--Button-secondary-color);
    --Button-color-hover: var(--Button-secondary-color-hover);
    --Button-color-active: var(--Button-secondary-color-active);
  }

  &--secondary-neutral {
    --Button-background: var(--Button-secondary-neutral-background);
    --Button-background-hover: var(--Button-secondary-neutral-background-hover);
    --Button-background-active: var(--Button-secondary-neutral-background-active);
    --Button-color: var(--Button-secondary-neutral-color);
    --Button-color-hover: var(--Button-secondary-neutral-color);
    --Button-color-active: var(--Button-secondary-neutral-color);

    .wds-Button-icon--end {
      color: var(--Button-secondary-color);
    }
  }

  &--tertiary {
    --Button-background: var(--Button-tertiary-background);
    --Button-background-hover: var(--Button-tertiary-background-hover);
    --Button-background-active: var(--Button-tertiary-background-active);
    --Button-color: var(--Button-tertiary-color);
    --Button-color-hover: var(--Button-tertiary-color-hover);
    --Button-color-active: var(--Button-tertiary-color-active);

    &,
    &:hover,
    &:active,
    &:focus {
      .wds-Button-labelText{
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
      }
    }
  }

  // Negative styles
  &--negative {
    &.wds-Button--primary {
      --Button-background: var(--Button-primary-negative-background);
      --Button-background-hover: var(--Button-primary-negative-background-hover);
      --Button-background-active: var(--Button-primary-negative-background-active);
      --Button-color: var(--Button-primary-negative-color);
    }

    &.wds-Button--secondary {
      --Button-background: var(--Button-secondary-negative-background);
      --Button-background-hover: var(--Button-secondary-negative-background-hover);
      --Button-background-active: var(--Button-secondary-negative-background-active);
      --Button-color: var(--Button-secondary-negative-color);
      --Button-color-hover: var(--Button-secondary-negative-color-hover);
      --Button-color-active: var(--Button-secondary-negative-color-active);
    }
  }

  // Size modifiers
  &--large {
    padding: var(--Button-large-padding);
  }

  &--medium {
    padding: var(--Button-medium-padding);

    &:has(.wds-Button-avatars){
      padding-inline-start: var(--size-8);
    }

    &:has(.wds-Button-icon--end){
      padding-inline-end: var(--size-8);
    }

    .wds-Button-icon--start{
      margin-inline-end: var(--Button-label-gap);
    }
  }

  &--small {
    padding: var(--Button-small-padding);

    &:has(.wds-Button-icon--start){
      padding-inline-start: var(--size-8);
    }

    &:has(.wds-Button-icon--end){
      padding-inline-end: var(--size-8);
    }
  }



  // Width modifiers
  &--block {
    width: 100%;
  }

  &-avatars {
    display: inline-flex;

    .np-avatar-view .np-avatar-view-content {
      color: var(--Button-color);
    }
  }

  // Icon styles
  &-icon {
    display: inline-block;

    &--md{
      --Button-iconSize: 18px;
    }

    &--sm{
      --Button-iconSize: 16px;
    }

    svg {
      width: var(--Button-iconSize);
      height: var(--Button-iconSize);
    }
  }

  &-content {
    position: relative;

    &--loading {
      .wds-Button-label,
      .wds-Button-media,
      .wds-Button-icon {
        visibility: hidden;
        opacity: 0;
      }
    }
  }

  &-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--Button-label-gap);
    position: relative;
  }

  &-loader {
    position: absolute;
    width: 100%;
    height: 100%;

    .process-circle {
      stroke: var(--Button-color);
    }
  }
}

/* Avatar border transparency */
/* dark buttons get 20% transparency, light buttons get 12% */
.wds-Button-avatars {
  .np-circle {
    --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);

    .wds-Button--secondary.wds-Button--negative &,
    .wds-Button--secondary &,
    .wds-Button--secondary-neutral &,
    .wds-Button--tertiary & {
      .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
      }
    }
    .wds-Button--primary &,
    .wds-Button--primary.wds-Button--negative & {
      .np-theme-personal--dark &,
      .np-theme-personal--forest-green & {
        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
      }
    }
    .wds-Button--tertiary &,
    .wds-Button--secondary-neutral & {
      .np-theme-personal--bright-green & {
        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
      }
    }
  }
}


:dir(rtl) {
  .wds-Button {
    .tw-icon-chevron-right,
    .tw-icon-arrow-right,
    .tw-icon-chevron-left,
    .tw-icon-arrow-left,
    .tw-icon-arrow-diagonal-down,
    .tw-icon-arrow-diagonal-up,
    .tw-icon-list,
    .tw-icon-activity {
      scale: -1 1;
    }
  }
}