// Button style
.ju-button {
  background-color: transparent;
  color: #000;
  padding: calcRem(10px) calcRem(15px);
  min-width: calcRem(150px);
  border: 1px solid #9fabba;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  letter-spacing: calcRem(2px);
  transition: all ease 0.5s;
  vertical-align: middle;
  @include borderRadius($large-radius);
  @include fontSize(14px);
  &:focus {
    outline: none;
  }

  &:hover {
    @include boxShadow($button_shadow);
  }

  &.orange-button {
    background-color: $orange-color;
    color: $white-color;
    border-color: $orange-color;
  }

  &.orange-outline-button {
    background-color: $white-color;
    color: $orange-color;
    border-color: $orange-color;
  }
  &.gray-outline-button {
    background-color: #f3f6fa;
    color: $gray-color;
    border-color: $gray-color;
    @include boxShadow(4px 4px 10px 0px rgba(232, 182, 139, 0.27))
  }
  &.grey-outline-button {
    background-color: #f3f6fa;
    color: $grey-color;
    border-color: $grey-color;
    @include boxShadow(4px 4px 10px 0px rgba(179, 179, 179, 0.27))
  }
}

// Rectangular orange button
.ju-rect-button {
  background-color: $white-color;
  border: 1px solid $orange-color;
  color: $orange-color;
  cursor: pointer;
  padding: calcRem(10px) calcRem(15px);
  @include borderRadius($small-radius);
}

// Material styles button
.ju-material-button {
  border: none;
  outline: none;
  padding: calcRem(10px) calcRem(20px);
  text-transform: uppercase;
  cursor: pointer;
  @include fontSize(14px);
  background-color: $cyan-color;
  color: $white-color;

  &:hover {
    @include boxShadow($button_shadow);
  }
}