@import "styles/base.scss";

.onguard-button {
  font: bold 14px/16px $font-family-sans-serif;
  border-radius: 4px;
  text-transform: uppercase;
  padding: 10px 15px;

  &.primary {
    color: white;
    background-color: $blue;
    border: 2px solid transparent;
    font-weight: 700;
    transition: all 0.3s;
    &:hover,
    &:focus {
      color: $blue;
      outline: none;
      background-color: white;
      border: 2px solid $blue;
    }
    &:active {
      border: 2px solid $dark-blue;
    }
  }

  &.secondary {
    color: $blue;
    background-color: white;
    border: 2px solid $blue;
    font-weight: 700;
    transition: all 0.3s;
    &:hover,
    &:focus {
      color: white;
      outline: none;
      background-color: $blue;
      border: 2px solid transparent;
    }
    &:active {
      box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    }
  }

  &.dismiss {
    color: $red;
    background-color: white;
    border: 2px solid $red;
    font-weight: 700;
    transition: all 0.3s;
    &:hover,
    &:focus {
      color: white;
      outline: none;
      background-color: $red;
      border: 2px solid transparent;
    }
    &:active {
      box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    }
  }

  &.neutral {
    color: $blue;
    background: none;
    border: 2px solid $blue;
    transition: color .35s, background .35s;
    min-width: 100px;
    &:hover {
      background: $blue;
      color: $white;
    }
    &:focus {
      outline: none;
    }
  }

  a, a:hover {
    text-decoration: none;
  }
}