@use "pix-design-tokens/typography";

.pix-button {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  outline: none;
  cursor: pointer;

  &[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &--size-large {
    @extend %pix-cta-l;

    padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
    border-radius: 50px;
  }

  &--size-small {
    @extend %pix-cta-s;

    padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
    border-radius: 25px;
  }

  &--primary {
    color: var(--pix-neutral-0);
    background-color: var(--pix-primary-500);

    &:not([aria-disabled="true"]) {
      &:hover {
        background-color: var(--pix-primary-700);
      }

      &:focus,
      &:focus-visible {
        background-color: var(--pix-primary-700);
        outline: 1px solid var(--pix-neutral-0);
        outline-offset: -5px;
      }

      &:active {
        background-color: var(--pix-primary-900);
        outline: none;
      }
    }
  }

  &--primary-white {
    color: var(--pix-primary-500);
    background-color: var(--pix-neutral-0);

    &:not([aria-disabled="true"]) {
      &:hover {
        color: var(--pix-primary-700);
      }

      &:focus,
      &:focus-visible {
        outline: 1px solid var(--pix-primary-700);
        outline-offset: -5px;
      }

      &:active {
        color: var(--pix-primary-900);
        outline: none;
      }
    }
  }

  &--primary-bis {
    color: var(--pix-neutral-900);
    background-color: var(--pix-secondary-500);

    &:not([aria-disabled="true"]) {
      &:hover {
        color: var(--pix-neutral-0);
        background-color: var(--pix-secondary-700);
      }

      &:focus,
      &:focus-visible {
        color: var(--pix-neutral-0);
        background-color: var(--pix-secondary-700);
        outline: 1px solid var(--pix-neutral-0);
        outline-offset: -4px;
      }

      &:active {
        color: var(--pix-neutral-0);
        background-color: var(--pix-secondary-900);
        outline: none;
      }
    }
  }

  &--secondary {
    color: var(--pix-primary-700);
    background-color: transparent;
    border: 2px solid var(--pix-primary-700);

    &:not([aria-disabled="true"]) {
      &:hover {
        color: var(--pix-primary-700);
        background-color: var(--pix-primary-100);
      }

      &:focus,
      &:focus-visible {
        color: var(--pix-primary-900);
        background-color: var(--pix-primary-100);
        outline: 1px solid var(--pix-primary-700);
        outline-offset: -5px;
      }

      &:active {
        color: var(--pix-neutral-0);
        background-color: var(--pix-primary-700);
        outline: none;
      }
    }
  }

  &--secondary-white {
    color: var(--pix-neutral-0);
    background-color: transparent;
    border: 2px solid var(--pix-neutral-0);

    &:not([aria-disabled="true"]) {
      &:hover {
        color: var(--pix-primary-700);
        background-color: var(--pix-neutral-0);
      }

      &:focus,
      &:focus-visible {
        color: var(--pix-primary-700);
        background-color: var(--pix-neutral-0);
        outline: 1px solid var(--pix-primary-500);
        outline-offset: -5px;
      }

      &:active {
        color: var(--pix-primary-900);
        background-color: var(--pix-primary-100);
        outline: none;
      }
    }
  }

  &--tertiary {
    padding-right: 0;
    padding-left: 0;
    color: var(--pix-primary-700);
    text-decoration: underline;
    background-color: transparent;

    &:not([aria-disabled="true"]) {
      &:hover,
      &:focus,
      &:focus-visible {
        color: var(--pix-primary-500);
      }

      &:active {
        color: var(--pix-primary-900);
      }
    }
  }

  &--tertiary-white {
    padding-right: 0;
    padding-left: 0;
    color: var(--pix-neutral-0);
    text-decoration: underline;
    background-color: transparent;
  }

  &--success {
    color: var(--pix-neutral-0);
    background-color: var(--pix-success-700);

    &:not([aria-disabled="true"]) {
      &:hover {
        background-color: var(--pix-success-900);
      }

      &:focus,
      &:focus-visible {
        background-color: var(--pix-success-900);
        outline: 1px solid var(--pix-neutral-0);
        outline-offset: -4px;
      }

      &:active {
        background-color: var(--pix-success-900);
        outline: none;
      }
    }
  }

  &--error {
    color: var(--pix-neutral-0);
    background-color: var(--pix-error-500);

    &:not([aria-disabled="true"]) {
      &:hover {
        background-color: var(--pix-error-700);
      }

      &:focus,
      &:focus-visible {
        background-color: var(--pix-error-700);
        outline: 1px solid var(--pix-neutral-0);
        outline-offset: -4px;
      }

      &:active {
        background-color: var(--pix-error-900);
        outline: none;
      }
    }
  }

  // DO NOT USE DEPRECATED
  &--transparent-dark {
    color: var(--pix-neutral-0);
    background-color: transparent;

    &.pix-button--border {
      border: 1px solid var(--pix-neutral-0);
    }

    &:not([aria-disabled="true"]) {
      &:hover {
        color: var(--pix-neutral-900);
        background-color: var(--pix-neutral-20);
        border: 1px solid transparent;
      }

      &:focus,
      &:focus-visible {
        color: var(--pix-neutral-900);
        background-color: var(--pix-neutral-20);
        outline: 1px solid var(--pix-neutral-900);
        outline-offset: -4px;
      }

      &:active {
        background-color: var(--pix-neutral-20);
        outline: none;
      }
    }
  }
}