$oauth-box-margin: 0 0 2rem 0 !default;
$oauth-buttons-direction: row !default;
$show-oauth-buttons-text: "false" !default;

.oauth-box {
   margin: $oauth-box-margin;
}

.oauth-buttons {
   display: flex;
   flex-wrap: wrap;
   flex-direction: $oauth-buttons-direction;
   gap: 20px;

   a {
      display: flex;
      align-items: center;
      text-decoration: none;

      .icon {
         background-color: $body-bg-alt;
         background-repeat: no-repeat;
         background-position: center;
         border-radius: 50%;
         width: 50px;
         height: 50px;
         display: inline-block;
         border: $border-width solid transparent;
         transition: border-color $transition-speed;
      }

      .text {
         padding: 0 10px 0 15px;
         line-height: 1.5;

         span {
            text-decoration: underline;
         }
      }

      @include haf {
         .icon {
            border-color: $black;
         }

         .text {
            span {
               text-decoration: none;
            }
         }
      }
   }

   .fb {
      .icon {
         $fb-icon: url('~@assets/icons/fb.svg') !default;

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

   .gp {
      .icon {
         $gp-icon: url('~@assets/icons/google.svg') !default;

         background-image: $gp-icon;
         background-size: 21px;
      }
   }

   .apple {
      .icon {
         $apple-icon: url('~@assets/icons/apple.svg') !default;

         background-image: $apple-icon;
         background-size: 15px;
      }
   }

   .sz {
      .icon {
         $seznam-icon: url('~@assets/icons/seznam.svg') !default;

         background-image: $seznam-icon;
         background-size: 15px;
      }
   }

   .amazon {
      .icon {
         $amazon-icon: url('~@assets/icons/amazon.svg') !default;

         background-image: $amazon-icon;
         background-size: 30px;
      }
   }
}

@if ($show-oauth-buttons-text == "false") {
   .page-user-new {
      .oauth-buttons {
         a {
            .text {
               display: none;
            }
         }
      }
   }
}
