/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/button/primary-large";
@import "~@bentley/ui-core/lib/ui-core/style/typography";

$signin-height: 315px; // 250px;
$signin-width:  275px;

$signin-background: $buic-background-dialog;
$signin-logo-color: $buic-foreground-primary;
$signin-text-color: $buic-text-color;
$signin-font-size:  $uicore-font-size;
$signin-hyperlink-color: $buic-foreground-primary;
$signin-hyperlink-hover-color: $buic-foreground-primary-tone;

/* sign in dialog */
.components-signin {
  font-family: Arial;
  width:  $signin-width;
  height: $signin-height;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: $signin-font-size;
  color: $signin-text-color;
  background-color: $signin-background;
  transform: translate(-50%, -50%);
  box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.25);

  /* content area */
  .components-signin-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 1.75em;
  }

  /* Avatar logo */
  .icon {
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 5em;
    color: $signin-logo-color;
    background-color: transparent;
    transform: translate(-50%, -50%);
  }

  /* sign-in prompt */
  .components-signin-prompt {
    margin-top: 3em;
    text-align: center;
    height: 7em;
  }

  /* sign in button */
  .components-signin-button {
    @include uicore-buttons-primary-large;
  }

  /* "Register" container */
  .components-signin-register {
    font-size: .9em;
    margin-top: 1em;
    text-align: center;
    width: 100%;

    /* "Register" hyperlink */
    a {
      text-decoration: underline;
      margin-left: .5em;
      color: $signin-hyperlink-color;
      cursor: pointer;

      &:hover {
        color: $signin-hyperlink-hover-color;
      }

      &:active {
        color: $signin-hyperlink-hover-color;
      }
    }
  }

  /* offline container */
  .components-signin-offline {
    align-self: center;
    margin-top: 2.25em;

    &:hover {
      color: $signin-hyperlink-hover-color;
      text-decoration: underline;
      cursor: pointer;
    }
  }

}