.auth__form {
  @extend .row;
  max-width: 420px;
  margin: 0 auto;

  .nav-tabs {
    margin-bottom: 20px;
  }

  .title {
    text-align: center;
    margin-bottom: 2em;
    .help-block {
      font-size: $font-size-base;
      font-weight: normal;
      margin: 20px 0 -10px;
    }
  }

  abbr[title=required] {
    display: none;
  }

  ul {
    @extend .list-unstyled;
  }

  .collapse {
    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 1;
    @include transition(max-height .5s ease);
    &.in {
      max-height: 300px;
    }
  }

  .facepile {
    margin: 20px 0;
  }
}

.auth__or {
  position: relative;
  font-size: $font-size-h4;
  color: darken($gray-lighter, 15%);
  margin: 20px 0;
  padding: 10px 0;
  hr {
    background-color: darken($gray-lighter, 10%);
    height: 1px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  span {
    display: block;
    position: absolute;
    left: 50%;
    top: -2px;
    margin-left: -25px;
    background-color: #fff;
    width: 50px;
    text-align: center;
  }
}

.auth__links {
  @extend .help-block;
  margin: 30px 0;
}

.auth__group {
  margin-bottom: 40px;
}

.auth__providers {
  @extend .row;
}

.auth__providers__provider {
  @extend .col-xs-6;
  @extend .col-sm-6;
  margin-bottom: 10px;
  a {
    width: 100%;
  }
}

.btn {
  &[data-provider=twitter] {
    background: #00ACED;
    border-color: #0099D3;
    &:hover {
      background: #21c2ff;
    }
  }
  &[data-provider=facebook] {
    background: #3B5998;
    border-color: #2F487C;
    &:hover {
      background: #4c70ba;
    }
  }
  &[data-provider=linkedin] {
    background: #069;
    border-color: #00547E;
    &:hover {
      background: #0088cc;
    }
  }
}
