@use '@growi/core/scss/bootstrap/init' as bs;

@use '~/styles/atoms/buttons';

.login-form :global {
  // To adjust the behavior, this problem is not solved.
  // See https://github.com/AaronCCWong/react-card-flip/issues/56
  .react-card-front,
  .react-card-back {
    height: 0% !important;
  }

  .collapse-external-auth {
    overflow: hidden;
  }

  .link-growi-org {
    position: absolute;
    bottom: 9px;
    z-index: 3;
  }

  .text-line {
    &:before,
    &:after {
      flex-grow: 1;
      height: 1px;
      margin:0 1em;
      content: '';
      background: rgba(white,0.5);
    }
  }

  .input-container {
    width: 89%;
    @include bs.media-breakpoint-down(sm) {
      width: 86%;
    }
  }

  .ldap-space {
    padding-right: 76px;
  }

  .input-ldap {
    position: absolute;
    top: 45%;
    right: 2%;
    transform: translateY(-50%);
  }
}


// Buttons
.login-form :global {

  .btn.register-btn {
    @extend %btn-register;
  }

  .btn.login-btn {
    --bs-btn-bg: #{rgba(#204986, 0.6)};
    --bs-btn-hover-bg: #{rgba(#204986, 0.8)};
    --bs-btn-active-bg: #{rgba(#204986, 0.8)};
  }

  .btn.function-btn {
    --bs-btn-bg: #{rgba(bs.$gray-800, 0.8)};
    --bs-btn-hover-bg: #{rgba(bs.$gray-800, 0.5)};
    --bs-btn-active-bg: #{rgba(bs.$gray-800, 0.5)};
  }

  .btn.google-btn {
    --bs-btn-bg: #{rgba(#4285F4, 0.4)};
    --bs-btn-hover-bg: #{rgba(#4285F4, 0.8)};
    --bs-btn-active-bg: #{rgba(#4285F4, 0.8)};
  }

  .btn.github-btn {
    --bs-btn-bg: #{rgba(#403D3E, 0.4)};
    --bs-btn-hover-bg: #{rgba(#403D3E, 0.7)};
    --bs-btn-active-bg: #{rgba(#403D3E, 0.7)};
  }

  .btn.facebook-btn {
    --bs-btn-bg: #{rgba(#29487d, 0.4)};
    --bs-btn-hover-bg: #{rgba(#29487d, 0.9)};
    --bs-btn-active-bg: #{rgba(#29487d, 0.9)};
  }

  .btn.oidc-btn {
    --bs-btn-bg: #{rgba(#835B1A, 0.4)};
    --bs-btn-hover-bg: #{rgba(#835B1A, 0.8)};
    --bs-btn-active-bg: #{rgba(#835B1A, 0.8)};
  }

  .btn.saml-btn {
    --bs-btn-bg: #{rgba(#138957, 0.4)};
    --bs-btn-hover-bg: #{rgba(#138957, 0.7)};
    --bs-btn-active-bg: #{rgba(#138957, 0.7)};
  }
}