/////////////////////////////////////////

// - Buttons - //

/////////////////////////////////////////

.btn {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 10rem;
  cursor: pointer;
  display: inline-block;
  font-family: $font-family;
  font-size: 1.7rem;
  -webkit-font-smoothing: antialiased;
  font-weight: $bold-weight;
  line-height: 1;
  outline: none;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;

  &.btn-default {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px $dark-grey;
    color: $dark-grey;
  }

  &.btn-default:hover {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px $darkest-grey;
    color: $darkest-grey;
  }

  &.btn-default:focus {
    box-shadow: inset 0 0 0 2px $dark-blue, 0 0 3px $medium-blue, 0 0 7px $medium-blue;
    color: $darkest-grey;
  }

  &.btn-default:active {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px $darkest-grey;
    color: $darkest-grey;
  }

  &.btn-primary {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px $medium-blue;
    color: $medium-blue;
  }

  &.btn-primary:hover {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px $dark-blue;
    color: $dark-blue;
  }

  &.btn-primary:focus {
    box-shadow: inset 0 0 0 2px $dark-blue, 0 0 3px $medium-blue, 0 0 7px $medium-blue;
    color: $dark-blue;
  }

  &.btn-primary:active {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px $dark-blue;
    color: $dark-blue;
  }
}

.btn-lg {
  font-size: 1.9rem;
  padding: 1.5rem 3rem;
}

@media screen and (max-width: 481px) {
  .btn {
    width: 100%;
  }
}

.btn:disabled:hover{
  background-color: $light-grey;
  border: 0;
  box-shadow: none;
  color: $medium-grey;
  cursor: not-allowed;
}

.btn:disabled {
  background-color: $light-grey;
  border: 0;
  box-shadow: none;
  color: $medium-grey;
  cursor: not-allowed;
}

.input-type-date {
  background-image: url('../images/calendar.svg');
  background-position: 99%;
  background-repeat: no-repeat;
  background-size: 2.5rem;
}

.input-type-autocompleter,
.react-autosuggest__input {
  background-image: url('../images/search.svg');
  background-position: 99%;
  background-repeat: no-repeat;
  background-size: 2.5rem;
}