.btn {
  /**
    * Button base
    */
  display: inline-block;
  vertical-align: middle;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  border: 0;
  background: transparent;
  transition: all 0.25s ease-in-out;
  font-family: 'FSSilasSans', sans-serif;
  font-weight: 300;
  &:focus {
    outline: 0;
  }

  &--primary {
    background-color: $lux-blue-3;
    color: #fff;
    padding: 10px 20px;
    &:hover {
      background-color: $lux-blue-2;
    }
  }

  &--secondary {
    background-color: $primary-color;
    color: #fff;
    padding: 10px 20px;
    &:hover {
      background-color: $lux-blue-2;
    }
  }

  &--tertiary {
  }
}

.btn--call {
  position: relative;
  border: 1px solid rgba(174, 173, 176, 0.6);
  text-align: center;
  padding: 7px 20px;
  transition: all 0.2s;
  &:before {
    position: absolute;
    content: '+44 20 7145 0120';
    background-color: #323334;
    color: $gray-color !important;
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 0.25s;
  }
  &:hover {
    &:before {
      opacity: 1;
    }
  }
}

.btn-dark {
  width: 100%;
  background-color: $primary-color;
  color: #fff;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    background-color: $lux-blue-2;
    color: $white-color;
  }
}
.btn-send {
  width: 100%;
  background-color: $lux-blue-3;
  color: #fff;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    background-color: $lux-blue-2;
    color: $white-color;
    .arrow-next {
      transform: translateX(-5px);
      transition: all 0.5s;
    }
  }
}
.btn-logIn {
  width: 100%;
  background-color: $lux-blue-3;
  color: #fff;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    background-color: $lux-blue-2;
    color: $white-color;
  }
}
.btn-no {
  width: 100%;
  background-color: $gray-color;
  color: #fff;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    background-color: $lux-blue-2;
    color: $white-color;
  }
}

@media (max-width: 750px) {
  .btn-send,
  .btn-dark {
    font-size: 14px;
    padding: 13px;
    .fs-base {
      font-size: 14px;
    }
  }
}