// Buttons
a.button{
  padding: calc(#{map-get($spacers, 3)} - #{$button-border-width}) calc(#{map-get($spacers, 4)} - #{$button-border-width}) 0px;
  line-height: $body-text-line-height;
}
.button{
  appearance: none;
  display: inline-block;
  width: 100%;
  //@include margin(0.5em 0.5em 0.5em null);
  padding: calc(#{map-get($spacers, 1)}) calc(#{map-get($spacers, 4)} - #{$button-border-width}) 0px;
  border-radius: $button-border-radius;
  border: $button-border;
  font-size: $base-font-size;
  font-weight: 500;
  min-height: 40px;
  color: $button-primary-color;
  @include font-smoothing;
  line-height: 1em;
  text-align: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  cursor: pointer;

  @include media-breakpoint-up(md) {
    width: auto;
  }

  @include media-breakpoint-down(sm) {
    & + .button {
      margin-top: 8px;
    }
  }

  &.focus,
  &:focus {
    outline: $focus-outline;
    outline-offset: $focus-spacing;
    color: $button-primary-color;
  }

  //############ Primary ###############
  &.button-primary {
    color: $button-primary-color;
    background-color: $button-primary-bg;
    border-color: $button-primary-border-color;

    &:hover,
    &.button-hover {
      background-color: $button-primary-hover-bg;
      border-color: $button-primary-hover-border-color;
    }

    &:active,
    &.button-active {
      background-color: $button-primary-active-bg;
      border-color: $button-primary-active-border-color;
    }

    &.focus,
    &:focus {
      background-color: $button-primary-focus-bg;
      border-color: $button-primary-focus-border-color;
    }

    &:disabled,
    &.disabled {
      opacity:0.3;
      box-shadow: none !important;
      cursor: not-allowed;

      &:hover {
        color: $button-primary-color !important;
        background-color: $button-primary-bg !important;
        border-color: $button-primary-border-color !important;
        opacity:0.3 !important;
        box-shadow: none !important;
      }
    }
  }

  //############ Secondary ##############
  &.button-secondary {
    color: $color-black;
    background-color: $color-gray-pale;
    border-color: $color-gray-medium-dark;

    &:hover,
    &.button-hover {
      background-color: $color-gray-mediumpale;
      border-color: $color-gray-dark;
    }

    &:active,
    &.button-active {
      background-color: $color-gray-light;
      border-color: $color-black;
    }

    &.focus,
    &:focus {
      background-color: $color-gray-pale;
      border-color: $color-gray-medium-dark;
    }
    &:disabled,
    &.disabled {
      opacity:0.3;
      box-shadow: none !important;
      cursor: not-allowed;
      border-color: $color-gray-light !important;

      &:hover {
        color: $color-black !important;
        background-color: $color-gray-pale !important;
        border-color: $color-gray-light !important;
        opacity:0.3 !important;
        box-shadow: none !important;
      }
    }
  }

  //############### tertiary ############
  &.button-tertiary {
    border-color: $color-gray-medium-dark;
    background-color: transparent;
    color: $color-black;
    font-weight: $font-weight-normal;

    &:hover,
    &.button-hover {
      border-color: $color-gray-dark;
    }

    &:active,
    &.button-active {
      border-color: $color-black;
    }

    &.focus,
    &:focus {
      border-color:$color-gray-medium-dark;
      background-color: transparent;
    }

    &:disabled,
    &.disabled {
      opacity:0.3;
      box-shadow: none !important;
      cursor: not-allowed;

      &:hover {
        border-color:$color-gray-medium-dark !important;
        background-color: transparent !important;
        color: $color-black;
        font-weight: $font-weight-normal !important;
        opacity:0.3;
        box-shadow: none !important;
      }
    }
  }

  //############ Button quaternary - button styled as a link #################
  &.button-quaternary {
    color: $color-gray-dark;
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
    font-weight: $font-weight-normal;
    padding-left: calc(8px - #{$button-border-width});

    &:hover,
    &.button-hover {
      background-color: $color-gray-mediumpale;
      box-shadow:none;
      border-bottom-color: transparent;
    }

    &:active,
    &.button-active {
      background-color: $color-gray-light;
      box-shadow:none;
      border-bottom-color: transparent;
    }

    &.focus,
    &:focus {
      color: $color-black;
      box-shadow:none;
      border-bottom-color: transparent;
    }

    &:disabled,
    &.disabled {
      opacity:0.3;
      box-shadow: none !important;
      cursor: not-allowed;

      &:hover {
        color: $color-gray-dark !important;
        background-color: transparent !important;
        font-weight: $font-weight-normal !important;
        opacity:0.3 !important;
        box-shadow: none !important;
      }
    }

    .icon-svg{
      margin-right: 0;
    }
  }

  &.button-small {
    color: $color-black;
    background-color: $color-gray-pale;
    border-color: $color-gray-light;

    &:hover,
    &.button-hover {
      background-color: $color-gray-pale;
      border-color: $color-border;
    }

    &:active,
    &.button-active {
      background-color: $color-gray-light;
      border-color: $color-black;
    }

    &.focus,
    &:focus {
      background-color: $color-gray-pale;
      border-color: $color-gray-light;
    }

    &:disabled,
    &.disabled {
      opacity:0.3;
      box-shadow: none !important;
      cursor: not-allowed;

      &:hover {
        color: $color-black !important;
        background-color: $color-gray-pale !important;
        border-color: $color-gray-light !important;
        opacity:0.3 !important;
        box-shadow: none !important;
      }
    }
  }

  .icon-svg {
    margin-right: 4px;
    fill: currentColor;
    margin-top: -0.2em;
  }
}

@mixin button-unstyled {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-weight: $font-weight-normal;
  margin: 0;
  padding: 0;
  text-align: left;
  -webkit-font-smoothing: auto;
  color: inherit;

  &:hover, &:focus {
    background-color: transparent;
    color: inherit;
  }
}

.button-unstyled {
  @include button-unstyled;
}

.button + .button{
  @include media-breakpoint-up(md) {
    margin-left: 8px;
    &:first-child{
      margin-left: 0;
    }
  }
}
.button-column{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .button{
    margin-top: 8px;
    margin-left: 0;
    &:first-child{
      margin-top: 0;
    }
  }
}