@import "../../scss/variables";
@import "../../scss/breakpoints.mixins";

@mixin button() {
  position: relative;
  z-index: 0; // for animation
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 20px;
  overflow: hidden;
  font-size: 14px;
  font-weight: $font-weight-semibold;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  background: $color-azure;
  border: 2px solid transparent;
  border-bottom-color: $color-axa-blue;
  // stylelint-disable-next-line plugin/no-unsupported-browser-features
  outline: none;
  transition: color 0.3s, border-color 0.3s;

  @include media-breakpoint-up(tablet) {
    height: 40px;
  }

  // animation
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 530px;
    content: "";
    // stylelint-disable-next-line plugin/no-unsupported-browser-features
    backface-visibility: hidden;
    background: $color-axa-blue;
    opacity: 0;
    transition: width 0.3s, opacity 0.3s;
    // TODO: introduce a min-width and animate on scaleY to prevent odd corners not styled on small buttons
    transform: translate(-50%, -50%) rotate(45deg);
    // stylelint-disable-next-line plugin/no-unsupported-browser-features
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
  }

  &:hover:not(.is-disabled):not([disabled]),
  &:focus:not(.is-disabled):not([disabled]) {
    color: #fff;
    text-decoration: none;
    border-color: $color-axa-blue;

    &::after {
      width: 100%;
      opacity: 1;
    }
  }

  &.is-disabled,
  [disabled] {
    color: #fff;
    text-decoration: none;
    cursor: default;
    background: $color-silver;
    border-bottom-color: $color-dusty-gray;
  }
}

// size modifiers
@mixin button--small() {
  @include media-breakpoint-up(tablet) {
    height: 30px;
    font-size: 12px;
    font-weight: $font-weight-semibold;
    border-width: 1px;
  }
}

@mixin button--large {
  height: 40px;
  font-size: 16px;

  @include media-breakpoint-up(tablet) {
    height: 50px;
  }
}

// style modifiers
@mixin button--ghost() {
  color: $color-azure;
  background: transparent;
  border-color: $color-azure;

  &.is-disabled,
  [disabled] {
    color: $color-silver;
    background: transparent;
    border-color: $color-silver;
  }

  &:hover:not(.is-disabled):not([disabled]),
  &:focus:not(.is-disabled):not([disabled]) {
    color: #fff;
    border-color: $color-azure;
  }

  &::after {
    // override hover color
    background-color: $color-azure;
  }
}

@mixin button--white-ghost() {
  background: transparent;
  border-color: #fff;

  &.is-disabled,
  [disabled] {
    color: $color-silver;
    background: transparent;
    border-color: $color-silver;
  }

  &:hover:not(.is-disabled):not([disabled]),
  &:focus:not(.is-disabled):not([disabled]) {
    color: $color-azure;
    border-color: #fff;
  }

  &::after {
    // override hover color
    background-color: #fff;
  }
}

@mixin button__icon() {
  width: 16px;
  height: 16px;
  margin-left: 20px;
  fill: currentColor;
}

@mixin button__icon--large() {
  width: 20px;
  height: 20px;
}

%button {
  @include button;
}

%button--ghost {
  @include button--ghost;
}

%button--white-ghost {
  @include button--white-ghost;
}

%button--small {
  @include button--small;
}

%button--large {
  @include button--large;
}

%button__icon {
  @include button__icon();

  %button--large & {
    @include button__icon--large();
  }
}