@import (reference) '../../theme/index.less';

.buttonBase(@bg: 'transparent', @bc: 'transparent', @color: @white, @fs: 15px, @pad: 0.3em 1.33em) {
  font: inherit;
  display: inline-flex;
  align-items: center;
  margin: 0.333em;
  appearance: none;
  background: transparent;
  border: @default-border;
  border-radius: @border-radius-base;
  padding: @pad;
  font-size: @fs;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  &.loading:not(.link):not(.dangerLink):not(.infoLink) {
    .spinner {
      opacity: 1;
      top: 20%;
      transition: all 0.2s;
    }
    .buttonContent {
      opacity: 0;
    }
    circle {
      stroke: fade(@color, 85%);
    }
  }
  &:not(.inverted) {
    background-color: @bg;
    border-color: @bc;
    color: @color;
    svg {
      fill: @color;
    }
  }
  &.inverted {
    background-color: transparent;
    border-color: @bg;
    color: @bg;
    svg {
      fill: @bg;
    }
    &:hover {
      color: @color;
      svg {
        fill: @color;
      }
    }
  }
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  &[disabled]:not(.link):not(.dangerLink):not(.infoLink) {
    background-color: fade(@bg, 65%);
    border-color: fade(@bc, 65%);
    pointer-events: none;
  }
  &:hover:not(.link):not(.dangerLink):not(.infoLink) {
    transition: 0.02s !important;
    background-color: darken(@bg, 7%);
  }
  &:focus:not(.link):not(.dangerLink):not(.infoLink) {
    border: 1px solid darken(@bc, 5%);
    box-shadow: 0 0 1px 2px fade(lighten(@bc, 7%), 75%), 0 0 0 0.1em fade(lighten(@bc, 7%), 2%);
    outline: 0;
  }
}

.spinner {
  opacity: 0;
  position: absolute;
  top: -50%;
  left: calc(~'50% - 8px');
  &[aria-hidden='true'] {
    visibility: hidden;
  }
  svg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

.hideMobile {
  .buttonText {
    display: none;
  }
  svg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
.buttonContent {
  display: flex;
  align-items: center;
  @media screen and (max-width: @screen-md) {
    &.hiddenMd {
      .hideMobile;
    }
  }
  @media screen and (max-width: @screen-sm) {
    &.hiddenSm {
      .hideMobile;
    }
  }
  @media screen and (max-width: @screen-xs) {
    &.hiddenXs {
      .hideMobile;
    }
  }
}

.leftIcon {
  svg {
    margin-right: 0.5em;
  }
}

.rightIcon {
  svg {
    margin-left: 0.5em;
  }
}

.primary {
  .buttonBase(@gray-06, @gray-06, @white);
  // This has a different hover state based on feedback from VPAT that hover state wasn't obvious
  &:hover {
    background-color: @gray-03;
  }
}

.secondary {
  .buttonBase(@white, @gray-02, @gray-06);
  &.disabled {
    opacity: 0.7;
  }
}

.info {
  .buttonBase(@accessible-blue, @accessible-blue);
}

.success {
  .buttonBase(@accessible-green, @accessible-green);
}

.danger {
  .buttonBase(@accessible-orange, @accessible-orange);
}

.editable {
  .buttonBase(@accessible-pink, @accessible-pink);
}

.editableNew {
  .buttonBase(@accessible-purple, @accessible-purple);
}

.infoNew {
  .buttonBase(@accessible-blue-green, @accessible-blue-green);
}

.complete {
  .buttonBase(@gray-09, @gray-09);
}

.linkBase(@color: @accessible-blue) {
  text-decoration: underline;
  padding: 0;
  margin: 0;
  font-weight: 500;
  &:focus {
    border: 1px solid lighten(@color, 5%);
    box-shadow: 0 0 0.5px 0.5px fade(lighten(@color, 7%), 75%),
      0 0 0 0.1em fade(lighten(@color, 7%), 2%);
    outline: 0;
    color: darken(@color, 10%);
    svg {
      fill: darken(@color, 10%);
    }
  }
  &:hover {
    color: darken(@color, 10%);
    svg {
      fill: darken(@color, 10%);
    }
  }
}

.link {
  .buttonBase(transparent, transparent, @accessible-blue);
  .linkBase();
}

.dangerLink {
  .buttonBase(transparent, transparent, @red-required);
  .linkBase(@red-required);
}

.infoLink {
  .buttonBase(transparent, transparent, @accessible-blue-green);
  .linkBase(@accessible-blue-green);
}