.btn-outline {
  background-color: transparent;
  color: inherit;
  transition: all .5s;
}

.btn-default-size {
  width: 300px;
}

.btn-primary.btn-outline {
  border-color: $cta-blue;
  color: $cta-blue;
  &:hover { background: $cta-blue;}
}

.btn-full-width {
    width: 100%;
}

.btn-success.btn-outline {
  color: $success-green;
}

.btn-info.btn-outline {
  color: $info-blue;
}

.btn-warning.btn-outline {
  color: $warning-orange;
}

.btn-danger.btn-outline {
  color: $danger-red;
}

.btn-white.btn-outline {
  border-color: #fff;
  color: #fff;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  color: $white;
}

.btn-edit {
  display: inline-block;
  margin-top: 15px;
  padding: 6px 12px;
  border: 1px solid $divider;
  border-radius: 4px;
  color: $bg-white;
  font-family: $open-sans;
  font-size: 13px;
  text-decoration: none;

  &:hover {
    background: $white;
    color: $cta-blue;
    cursor: pointer;
  }
}

.btn-circle {
  border-radius: 15px;
  font-size: 12px;
  height: 30px;
  line-height: 1.428571429;
  padding: 6px 0;
  text-align: center;
  width: 30px;

  &.btn-lg {
    border-radius: 25px;
    font-size: 18px;
    height: 50px;
    line-height: 1.33;
    padding: 10px 16px;
    width: 50px;
  }

  &.btn-xl {
    @include border-radius(35px);
    font-size: 24px;
    height: 70px;
    line-height: 1.33;
    padding: 10px 16px;
    width: 70px;
  }
}

.btn-slack,
.btn-github {
  @include font-face(400, 15px, normal, $black);
  background-color: $bg-white;
  border: 2px solid $cta-blue;
  border-radius: 6px;
  height: 36px;
  margin-top: -8px;
  padding: 0 20px;
}

.btn-slack-join {
  @include font-face(400, 15px, normal, $primary-grey);
  @include border-radius(6px);
  background-color: $bg-white;
  height: 36px;
}

#leave-hangout {
    background: $white;
    color: $cta-blue;
    border: 1px solid $cta-blue;
}

.btn-cb2 {
  @include font-face(700, 15px, bold, $bg-white);
  background-color: $cta-blue;
  display: block;
  margin: 10px auto;
  white-space: normal;

  &:hover {
    color: $white;
  }

  &:focus {
    color: $white;
  }

  &.btn-success {
    background: $success-green;
  }
}

.btn-continue {
    background: $success-green;
    @include font-face(700, 18px, bold, $bg-white);
    height: 100%;
}

.btn-leave {
  background: $warm-grey;
  &:hover {
    background: $danger-red;
  }
}

.btn-cb3 {
  @include font-face(700, 15px, bold, $bg-white);
  background-color: $cta-blue;
  display: block;
  height: 36px;
  margin: 0 auto;

  &:hover {
    color: $white;
  }

  &:focus {
    color: $white;
  }

  &.btn-success {background: $success-green;}

}

#hangout-faq-popup {
  cursor: pointer;
}


.btn-learning {
  color: $white;

  &.btn-unlike {
    color: $cta-red;
  }

  &.btn-like {
    color: $cta-blue;
  }
}

.btn-learning:hover {
  cursor: pointer;
}

.delete-hangout:hover, .edit-hangout:hover {
  cursor: pointer;
}

.fa-comment {
  color: $cta-blue;
}

.btn-block {
  @include font-face(700, 15px, bold, $cta-blue);
  background: $white;
  border: 1px solid $cta-blue;
  margin-top: 10px;
  &:hover {
    color: $cta-blue;
    background: $white;
    border: 1px solid $cta-blue;
    position: relative;
    top: -1px;
    left: -1px;
  }
}

li.delete-hangout, li.edit-hangout {
  @media (min-width: 480px) {
    border: 0;
    padding: 0;
  }
}

.delete-hangout.btn.btn-cb2.btn-danger {
  color: $white;
}

#btn-load-more, #load-more-learnings {
  color: $cta-blue;
  margin: 10px 0;

  &:hover { color: $white; }
}

.btn-grey {
  background: $warm-grey;
}

.hangout-action-buttons {
  .btn {
    display: inline-block;
    width: 100%;
  }
  .hangout-action-buttons-other {
      a.btn {
        @include font-face(200, 15px, light, $black);
        background: transparent;
        border: 1px solid $black;
        margin: 10px 0px 0px 0px;
      }
  }
}

#create-hangout-popup, #createGroupButton, .btn-schedule-hangout, .btn-createGroup-notLoggedIn {
  background: $success-green;
  margin: 0 auto;
  max-width: 340px;
}
#createGroupButton, .btn-createGroup-notLoggedIn {
  display:inline;
  margin: 0 2%;
  border: 1px solid white;
}
.btn-clear {
  width: 100%;
  @include font-face(700, 15px, light, $white);
  background: $cta-blue;
  border: 1px solid $white;
  &:hover {
    background: $cta-blue;
    border: 1px solid $white;
    color: $white;
  }
}

.standard-header-btn{
  background: $success-green;
  margin: 0 auto;
  max-width: 340px;
}

.btn-load-more {
    margin: 20px auto;
}
