@import '../colors';
@import '../variables';
@import '../waves';
@import '../mixins';

$hover-front-bg-opacity: 0.48;

@mixin background($from-color, $to-color) {
  &::before {
    background-color: $from-color;
  }

  &:hover:not(.link) {
    &::before {
      background-color: $from-color;
    }

    &::after {
      background-color: $to-color;
      opacity: $hover-front-bg-opacity;
    }
  }
}

.tix-button.v4 {
  @include font-base;
  font-weight: $font-weight-bold;
  cursor: pointer;
  position: relative;
  display: inline-block;
  outline: none;
  overflow: hidden;
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: $color-N0;
  line-height: normal;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  box-sizing: border-box;

  &.invert:not(.link):not(.disabled) {
    color: $color-N800;

    &::before,
    &.danger::before,
    &.primary::before,
    &.secondary::before,
    &.tertiary::before,
    &:hover::after,
    &.danger:hover::after,
    &.primary:hover::after,
    &.secondary:hover::after,
    &.tertiary:hover::after {
      background-color: $color-N0;
    }

    &:active:before,
    &:active.danger::before,
    &:active.primary::before,
    &:active.secondary::before,
    &:active.tertiary::before,
    &:active:hover::after,
    &:active.danger:hover::after,
    &:active.primary:hover::after,
    &:active.secondary:hover::after,
    &:active.tertiary:hover::after {
      background-color: $color-B100;
    }
  }

  // Based on discussion with the ui/ux team, to create background color effect we use multiples bg layer approach.
  // This is work around to create new color between 2 color tokens.
  // Example, we have two color B100 & B200. For hover state we need color between that two colors.
  // Instead of introduce new color token, we decide to use multiples bg layer approach.
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &::before {
    z-index: -2;
    background-color: $color-B400;
  }

  &::after {
    z-index: -1;
    opacity: 0;
    transition: inherit;
  }

  &:hover:not(.link):not(.disabled) {
    @include elevation-2;

    &::after {
      background-color: $color-B300;
      opacity: $hover-front-bg-opacity;
    }
  }

  &:active:not(.link):not(.disabled) {
    @include elevation-2;
  }

  &.mobile {
    @include font-size-b2;
    height: 36px;
    min-width: 84px;

    &.large {
      @include font-size-b1;
      height: 48px;
      border-radius: 8px;
      min-width: 112px;

      .tix-button__loading-indicator-container {
        height: 32px;
      }
    }

    &.small {
      @include font-size-b3;
      height: 28px;
      min-width: 64px;

      .tix-button__loading-indicator-container {
        height: 21px;
      }
    }

    &.link {
      @include font-size-b2;
      text-decoration: underline;

      &.large {
        @include font-size-b1;
        height: 22px;
      }

      &.small {
        @include font-size-b3;
        height: 16px;
      }

      &.invert:not(.disabled) {
        color: $color-N0;
      }
    }
  }

  &.desktop {
    @include font-size-b2-desktop;
    height: 44px;
    border-radius: 8px;

    &:not(.link) {
      min-width: 120px;
    }

    .outline {
      display: none;
      position: absolute;
      left: 2px;
      right: 2px;
      top: 2px;
      bottom: 2px;
      border-radius: 6px;

      @at-root {
        .secondary:not(.link)#{&} {
          border: solid 1px $color-B400;
        }

        .tertiary:not(.link)#{&} {
          border: solid 1px $color-B400;
        }

        .danger:not(.link)#{&} {
          border: solid 1px $color-R400;
        }
      }
    }

    &:not(.link) {
      .outline {
        border: solid 1px $color-N0;
      }
    }

    &:focus-visible {
      .outline {
        display: block;
      }
    }

    &.large {
      @include font-size-b1-desktop;
      height: 52px;
      border-radius: 8px;

      .tix-button__loading-indicator-container {
        height: 32px;
      }
    }

    &.small {
      @include font-size-b3-desktop;
      height: 32px;
      border-radius: 6px;

      .tix-button__loading-indicator-container {
        height: 21px;
      }
    }

    &.link {
      @include font-size-b2-desktop;

      &.large {
        @include font-size-b1-desktop;
        height: 22px;
      }

      &.small {
        @include font-size-b3-desktop;
        height: 16px;
      }
    }
  }

  &.block {
    width: 100%;
  }

  &.capitalize {
    text-transform: capitalize;
  }

  &.lowercase {
    text-transform: lowercase;
  }

  &.uppercase {
    text-transform: uppercase;
  }

  &.secondary {
    color: $color-B400;
    @include background($color-B100, $color-B200);
  }

  &.danger {
    color: $color-R400;
    @include background($color-R100, $color-R200);
  }

  &.tertiary {
    color: $color-B400;
    @include background(transparent, $color-B200);

    &.disabled,
    &:disabled {
      @include background(transparent, transparent);
    }
  }

  &.disabled,
  &:disabled {
    color: $font-color-disabled;
    cursor: not-allowed;

    @include background($color-N200, $color-N200);
  }

  &.link {
    height: 20px;
    padding: 0;
    text-decoration: none;
    border-radius: 0;
    margin: 0;
    text-decoration: underline;

    &:not(.disabled) {
      color: $color-B400;
    }

    &::before {
      background-color: transparent;
    }

    &:active:not(.disabled),
    &:active:not([href='javascript:void(0)']) {
      text-decoration: underline;
    }

    &.invert:not(.disabled) {
      color: $color-N0;
    }
  }
}

.tix-button__loading-indicator-container.v4 {
  height: 26px;
}