.oauth-box {
   border-bottom: 1px solid $border-color;
   margin: 0 auto 2rem;
   padding-bottom: 40px;
   position: relative;
   text-align: center;
}

.oauth-buttons {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   text-align: center;
   justify-content: space-between;

   > span {
      position: absolute;
      bottom: -9px;
      left: calc(50% - 30px);
      display: inline-block;
      width: 60px;
      background: $body-bg;
   }

   .btn {
      .text {
         text-align: center;
         flex-grow: 1;
         padding: 0 5px;
         margin-left: 0;
      }

      small {
         display: block;
      }
   }

   .active .text {
      @include truncate;

      margin-right: 0;
   }
}

.oauth-login {
   padding-top: 1rem;

   .oauth-buttons {
      .btn {
         width: 50%;
         min-width: 50%;
         margin: 0;
         text-transform: uppercase;
         letter-spacing: .12px;
         position: relative;

         &:first-child {
            width: calc(50% - 3px);
            min-width: calc(50% - 3px);
            font-weight: 700;
         }

         &:last-child {
            width: calc(50% - 3px);
            min-width: calc(50% - 3px);
            color: $black;
            font-weight: 600;
         }
      }
   }
}

.page-user-edit {
   .registration-submit {
      text-align: center;
      padding-bottom: 25px;
   }

   .oauth-box {
      border-top: 1px solid $border-color;
      padding: 25px 0 0;
      border-bottom: 0;
      text-align: center;

      h2 {
         margin-bottom: 10px;
      }

      p {
         margin-bottom: 25px;
      }
   }

   .oauth-buttons {
      margin: 0 auto;

      > span {
         display: none;
      }
   }
}
