@import 'utils';

:host {
  display: inline-block;
  --spw-button-font-size-small: 14px;
  --spw-button-font-size-medium: 16px;
  --spw-button-font-size-large: 18px;
  --spw-button-px-small: 16px;
  --spw-button-px-medium: 20px;
  --spw-button-px-large: 24px;
  --spw-button-py-small: 8px;
  --spw-button-py-medium: 8px;
  --spw-button-py-large: 12px;
  @extend %reset;
}

:host([isfullwidth='true']) {
  display: block;
}

/* Base */

.spw-button {
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 27px;
  letter-spacing: 0.18px;
  cursor: pointer;
  font-weight: bold;
  outline: 3px solid transparent;
  overflow: hidden;
  transition: all 0.2s ease-in-out;

  &--fullwidth {
    width: 100%;
  }

  &:focus-visible {
    outline: 3px solid var(--spw-ds-focus);
  }

  &__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  &:is(a) {
    text-decoration: none;
  }
}

/* Variants */

.spw-button {
  &--primary {
    background: var(--spw-ds-primary);
    color: var(--spw-ds-white);
    &:not([disabled]):hover {
      background: var(--spw-ds-variant);
    }
    &:not([disabled]):active {
      background: var(--spw-ds-active);
    }
  }

  &--secondary {
    background: var(--spw-color-themes-grey-grey-200);
    color: var(--spw-color-themes-grey-grey-800);
    &:not([disabled]):hover {
      background: var(--spw-color-themes-grey-grey-300);
    }
    &:not([disabled]):active {
      background: var(--spw-color-themes-grey-grey-400);
    }
  }

  &--tertiary {
    transition: none;
    border-radius: 4px;
    background: none;
    color: var(--spw-ds-primary);
    &:not([disabled]):hover,
    &:not([disabled]):active {
      text-decoration: underline;
    }
    &:not([disabled]):active {
      color: var(--spw-ds-active);
    }
  }

  &--outlined {
    color: var(--spw-ds-primary);
    border: 2px solid var(--spw-ds-primary);
    background: transparent;
    &:not([disabled]):hover {
      background: var(--spw-ds-cta-outlined-bg-hover);
      border-color: var(--spw-ds-cta-outlined-stroke-hover);
      color: var(--spw-ds-cta-outlined-stroke-hover);
    }
    &:not([disabled]):active {
      background: var(--spw-ds-cta-outlined-bg-active);
      border-color: var(--spw-ds-cta-outlined-stroke-active);
      color: var(--spw-ds-cta-outlined-stroke-active);
    }
  }
}

/* Disabled */

.spw-button {
  &--primary[disabled],
  &--secondary[disabled] {
    background: var(--spw-color-themes-grey-grey-100);
  }

  &--tertiary[disabled] {
    background: none;
  }

  &--primary[disabled],
  &--secondary[disabled],
  &--tertiary[disabled],
  &--outlined[disabled] {
    color: var(--spw-color-themes-grey-grey-400);
    border-color: none;
    cursor: not-allowed;
  }

  &--outlined[disabled] {
    border-color: var(--spw-color-themes-grey-grey-400);
    background: none;
  }
}

/* Surface dark */

.spw-button {
  &--surface-dark {
    box-shadow: var(--spw-effect-elevation-8);
    &:not([disabled]):active {
      box-shadow: var(--spw-effect-elevation-active-0),
        var(--spw-effect-elevation-active-1),
        var(--spw-effect-elevation-active-2);
    }

    &[disabled] {
      box-shadow: none;
    }

    &.spw-button--primary {
      &[disabled] {
        color: var(--spw-colors-support-grey-grey-800);
        background: var(--spw-colors-support-grey-grey-700);
      }
    }

    &.spw-button--secondary {
      color: var(--spw-colors-support-grey-grey-900);
      background: var(--spw-ds-white);
      &:not([disabled]):hover {
        background: var(--spw-colors-support-grey-grey-300);
      }
      &:not([disabled]):active {
        background: var(--spw-colors-support-grey-grey-400);
      }
      &[disabled] {
        color: var(--spw-colors-support-grey-grey-800);
        background: var(--spw-colors-support-grey-grey-700);
      }
    }

    &.spw-button--tertiary {
      box-shadow: none;
      color: var(--spw-ds-white);
      &:not([disabled]):hover,
      &:not([disabled]):active {
        box-shadow: none;
      }
      &:not([disabled]):active {
        color: var(--spw-ds-primary);
      }
      &[disabled] {
        color: var(--spw-colors-support-grey-grey-700);
      }
    }

    &.spw-button--outlined {
      color: var(--spw-ds-white);
      border-color: var(--spw-ds-white);
      &:not([disabled]):hover {
        color: var(--spw-colors-support-grey-grey-900);
        border-color: var(--spw-ds-white);
        background: var(--spw-ds-white);
      }
      &:not([disabled]):active {
        color: var(--spw-colors-support-grey-grey-900);
        border-color: var(--spw-colors-support-grey-grey-400);
        background: var(--spw-colors-support-grey-grey-400);
      }
      &[disabled] {
        border-color: var(--spw-colors-support-grey-grey-700);
        color: var(--spw-colors-support-grey-grey-700);
      }
    }
  }
}

/* Surface light */

.spw-button {
  &--surface-light {
    &.spw-button--primary {
      &[disabled] {
        color: var(--spw-colors-support-grey-grey-600);
        background: var(--spw-colors-support-grey-grey-500);
      }
    }

    &.spw-button--secondary {
      color: var(--spw-colors-support-grey-grey-900);
      background: var(--spw-ds-white);
      &:not([disabled]):hover {
        background: var(--spw-colors-support-grey-grey-300);
      }
      &:not([disabled]):active {
        background: var(--spw-colors-support-grey-grey-500);
      }
      &[disabled] {
        color: var(--spw-colors-support-grey-grey-600);
        background: var(--spw-colors-support-grey-grey-500);
      }
    }

    &.spw-button--tertiary {
      color: var(--spw-colors-support-grey-grey-900);
      &:not([disabled]):active {
        color: var(--spw-ds-primary);
      }
      &[disabled] {
        color: var(--spw-colors-support-grey-grey-600);
      }
    }

    &.spw-button--outlined {
      color: var(--spw-colors-support-grey-grey-900);
      border-color: var(--spw-colors-support-grey-grey-900);
      &:not([disabled]):hover {
        color: var(--spw-colors-support-grey-grey-900);
        border-color: var(--spw-ds-white);
        background: var(--spw-ds-white);
      }
      &:not([disabled]):active {
        color: var(--spw-colors-support-grey-grey-900);
        border-color: var(--spw-colors-support-grey-grey-300);
        background: var(--spw-colors-support-grey-grey-300);
      }
      &[disabled] {
        border-color: var(--spw-colors-support-grey-grey-600);
        color: var(--spw-colors-support-grey-grey-600);
      }
    }
  }
}

/* Sizes */

.spw-button {
  &--large {
    font-size: var(--spw-button-font-size-large);
    padding: var(--spw-button-py-large) var(--spw-button-px-large);
  }

  &--medium {
    font-size: var(--spw-button-font-size-medium);
    padding: var(--spw-button-py-medium) var(--spw-button-px-medium);
  }

  &--small {
    font-size: var(--spw-button-font-size-small);
    padding: var(--spw-button-py-small) var(--spw-button-px-small);
  }

  &--small,
  &--medium,
  &--large {
    &.spw-button--tertiary {
      padding: 4px;
    }
  }
}

/* Icon */

.spw-icon {
  &--left {
    margin-right: 8px;
  }
  &--right {
    margin-left: 8px;
  }
}