// Social auth login styles.
@import "../../defaults";   // Global component defaults.

.social-auth {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  @include margin(0 -1.9rem);

  .social-network {
    width: 45%;
    @include margin(0.25rem);
    @include padding(0.5rem);
    cursor: pointer;
    transition: box-shadow 0.2s ease 0s,color;
    border-width: 0;

    &:hover,
    &:focus,
    &:active {
      box-shadow: 0 1px 4px rgba(26, 25, 43, .24) !important;
    }
  }

  .auth-link {
    display: flex;
    font-family: Roboto,sans-serif;
    @include rfs(1.125rem, font-size);
    font-weight: 625;
    line-height: var(--bs-body-line-height);
    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
      color:#145CC6;
    }
  }

  .auth-icon {
    @include margin-right(0.75rem);
    margin-left: 0;
    width: 1.5rem;
    max-width: 100%;
    max-height: 40px;
  }

  @include media-breakpoint-down(sm) {
    .social-network {
      @include padding-right(0.75rem);
    }
  }
}
