.oauth-box {
   border-bottom: 1px solid $border-color;
   margin: 0 auto 2rem;
   max-width: 700px;
   padding-bottom: 30px;
   text-align: center;
}

.oauth-buttons {

   .btn {
      display: flex;
      align-items: center;
      padding: 0 10px 0 0;
      margin: 10px auto;
      max-width: 320px;

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

      .icon {
         background: no-repeat center;
         display: inline-block;
         height: 56px;
         width: 56px;
      }
   }

   .fb {
      color: #fff;
      background: #055292;
      border: 1px solid #055292;

      .icon {
         $fb-icon: url('/static/images/fb-login.svg') !default;

         background-image: $fb-icon;
         background-size: 26px;
      }

      @include haf {
         background: darken(#055292, 10%);
         border-color: darken(#055292, 10%);
      }
   }

   .gp {
      background: #2783fd;
      border: 1px solid #2783fd;
      color: #fff;

      .icon {
         $gp-icon: url('/static/images/g-login.svg') !default;

         background-color: #fff;
         background-image: $gp-icon;
         background-size: 43px;
      }

      @include haf {
         background: darken(#2783fd, 10%);
         border-color: darken(#2783fd, 10%);
      }
   }

   .sz {
      background: #2783fd;
      border: 1px solid #2783fd;
      color: #fff;

      .icon {
         $gp-icon: url('/static/images/sz-login.svg') !default;

         background-color: #fff;
         background-image: $gp-icon;
         background-size: 43px;
      }

      @include haf {
         background: darken(#2783fd, 10%);
         border-color: darken(#2783fd, 10%);
      }
   }

   .apple {
      background: #2783fd;
      border: 1px solid #2783fd;
      color: #fff;

      .icon {
         $gp-icon: url('/static/images/apple-login.svg') !default;

         background-color: #fff;
         background-image: $gp-icon;
         background-size: 43px;
      }

      @include haf {
         background: darken(#2783fd, 10%);
         border-color: darken(#2783fd, 10%);
      }
   }

   .amazon {
      background: #2783fd;
      border: 1px solid #2783fd;
      color: #fff;

      .icon {
         $gp-icon: url('/static/images/amazon-login.svg') !default;

         background-color: #fff;
         background-image: $gp-icon;
         background-size: 43px;
      }

      @include haf {
         background: darken(#2783fd, 10%);
         border-color: darken(#2783fd, 10%);
      }
   }

   @media screen and (min-width: $sm) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 -10px;

      .btn {
         margin: 10px;
         width: 40%;
      }
   }
}
