.oauth-box {
   border: 1px solid $border-color;
   margin-top: 50px;
   padding: 30px 30px 10px;
   text-align: center;

   .oauth-login {
      margin-top: 20px;
   }
}

.oauth-login {
   align-items: center;
   display: flex;
   margin: 10px auto 20px;
   max-width: 500px;

   .btn {
      color: $white;
      flex-grow: 1;
      flex-shrink: 1;
      text-align: center;
      padding: 15px 3px;
      border: 0;
      @include underline-never;

      span {
         padding-right: 4px;
      }

      small {
         @include truncate;

         display: block;
         font-size: 12px;
         line-height: 1.2;
         text-transform: none;
      }

      &.active {
         padding: 9px 3px;
      }
   }

   .fb {
      background: #3d589b;
      margin-right: 5px;
      width: calc(50% - 5px);

      &:hover,
      &:active,
      &:focus {
         background-color: darken(#3d589b, 10%);
      }
   }

   .gp {
      margin-left: 5px;
      width: calc(50% - 5px);
      background: #dd4e41;

      &:hover,
      &:active,
      &:focus {
         background-color: darken(#dd4e41, 10%);
      }
   }
}
