$vl-button-border: 0.2rem;
$vl-button-border-small: 0.1rem;

.vl-button {
  @include vl-u-text--ellipse;
  @include reset-button;
  display: inline-flex;
  align-items: center;
  height: $vl-form-input-height;
  font-size: $vl-form-font-size;
  font-family: $vl-base-font;
  line-height: $vl-form-input-height;
  padding: 0 4rem;
  background-color: $vl-action-color;
  text-decoration: none;
  color: $vl-action-fg-color;
  text-align: center;
  outline: 0;
  cursor: default;

  @include respond-to(small) {
    font-size: $vl-base-mobile-font-size;
    padding: 0 $vl-spacing-small;
  }

  &:hover,
  &:focus {
    background-color: $vl-action-hover-color;
    text-decoration: none;
    color: $vl-action-fg-color;
  }

  &:focus {
    outline: .2rem solid $vl-outline-color;
  }

  &:active {
    background-color: $vl-action-active-color;
  }

  &:visited {
    color: $vl-white;
  }

  // Secondary button
  &--secondary {
    background-color: transparent;
    color: $vl-action-color;
    border: $vl-button-border solid currentColor;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
    line-height: $vl-form-input-height - $vl-button-border * 2;

    &:visited {
      color: $vl-action-color;
    }

    &:hover,
    &:focus,
    &:active {
      color: $vl-action-hover-color;
      background-color: transparent;
      box-shadow: inset 0px 0px 0px $vl-button-border $vl-action-hover-color;
    }
  }

  // Tertiary button
  &--tertiary {
    background-color: transparent;
    color: $vl-action-color;
    border: 0.1rem $vl-action-tertiary-color solid;
    transition: background-color 0.2s, box-shadow 0.2s;
    line-height: $vl-form-input-height - $vl-button-border-small * 2;

    &:visited {
      color: $vl-action-color;
    }

    &:hover,
    &:focus,
    &:active {
      color: $vl-action-color;
      background-color: transparent;
      border-color: $vl-action-tertiary-hover-color;
      box-shadow: inset 0px 0px 0px $vl-button-border $vl-action-tertiary-hover-color;
    }
  }

  // Block modifier
  &--block {
    display: block;
    width: 100%;
    padding: 0;

    &.vl-button--icon-after,
    &.vl-button--icon-before {
      width: 100%;
    }
  }

  // Icon modifier
  &--icon {
    width: $vl-form-input-height;

    &.vl-button {
      padding: 0;

      .vl-button__icon {
        margin: auto;
      }
    }
  }

  // Disabled modifier
  &--disabled {
    background-color: $vl-disabled-color;
    border-color: $vl-disabled-color;
    color: $vl-page-bg;
    cursor: not-allowed;

    &:hover,
    &:focus,
    &:active {
      background-color: $vl-disabled-color;
      border-color: $vl-disabled-color;
      color: $vl-page-bg;
      box-shadow: none;
    }

    &.vl-button--secondary {
      background-color: $vl-white;
      color: $vl-disabled-color;

      &:visited {
        color: $vl-disabled-color;
      }
    }
  }

  // Error modifier
  &--error {
    &.vl-button {
      background: $vl-error-color;
    }

    &.vl-button--secondary {
      background-color: $vl-white;
      color: $vl-error-color;

      &:visited {
        color: $vl-error-color;
      }

      &:hover,
      &:focus,
      &:active {
        color: $vl-error-hover-color;
        background-color: transparent;
        box-shadow: inset 0px 0px 0px $vl-button-border $vl-error-hover-color;
      }
    }

    &:hover,
    &:focus,
    &:active {
      color: $vl-white;
      background-color: $vl-error-hover-color;
    }

    &.vl-button--tertiary {
      &.vl-button {
        background-color: $vl-white;
        color: $vl-error-color;
        border-color: $vl-error-color;

        &:visited {
          color: $vl-error-color;
        }

        &:hover,
        &:active {
          color: $vl-error-hover-color;
          border-color: $vl-error-hover-color;
          background-color: transparent;
          box-shadow: inset 0px 0px 0px $vl-button-border $vl-error-hover-color;
        }
      }

    }
  }

  // Large modifier
  &--large {
    height: $vl-form-input-height-large;
    line-height: $vl-form-input-height-large;
    font-size: $vl-form-font-size-large;
  }

  // Wide modifier
  &--wide {
    padding: 0 6rem;
  }

  // Narrow modifier
  &--narrow {
    padding: 0 1rem;
  }

  // Loading modifier
  &--loading {
    background-color: $vl-disabled-color;
    border-color: $vl-disabled-color;
    position: relative;
    cursor: not-allowed;
    color: $vl-text-color;
    padding: 0 8rem 0 4rem;

    &:hover,
    &:focus,
    &:active {
      background-color: $vl-disabled-color;
      border-color: $vl-disabled-color;
      box-shadow: none;
      color: $vl-text-color;


      &::after {
        background-color: $vl-disabled-color;
      }

    }

    &:visited {
      color: $vl-text-color;
    }

    &::after {
      @include waveanim($vl-text-color, waving-light);
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      right: 4rem;
      margin-top: -0.2rem;
      margin-right: 3.2rem;
      width: 0.4rem;
      height: 0.4rem;
      background-color: $vl-disabled-color;
      border-radius: 50%;
      box-shadow: 1rem 0 $vl-page-bg, 2rem 0 $vl-page-bg, 3rem 0 $vl-page-bg;
    }

    &.vl-button--secondary {
      &::after {
        @include waveanim($vl-text-color, waving-dark);
      }
    }
  }

  // Icon in button
  &__icon {
    display: inline-flex;

    &--before {
      margin-right: 0.8rem;
    }

    &--after {
      margin-left: 0.8rem;
    }
  }
}

// Button Group
.vl-button-group {
  display: flex;
  flex-wrap: wrap;

  .vl-button {
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
}