@import '../core';

@mixin login(
  $container-selector: '.ec-login-container', 
  $content-selector: '.ec-login-content', 
  $card-selector: '.ec-login-card', 
  $card-header-selector: '.ec-login-card-header', 
  $logo-selector: '.ec-login-logo', 
  $banner-selector: '.ec-login-banner', 
  $form-selector: '.ec-login-form',
  $form-control-selector: '.ec-login-form-control',
  $form-footer-selector: '.ec-login-form-footer',
  $card-footer-selector: '.ec-login-card-footer',
  $form-submit-button-selector: '.ec-login-submit'
) {
  #{$container-selector} {
    background: var(--ec-background-splash);
    display: flex;
    align-items: center;
    flex: 1 1;
  }
  
  #{$content-selector} {
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 25rem;
  }
  
  #{$card-selector} {
    background-color: var(--ec-background-color);
    border-radius: var(--ec-border-radius-dialog);
    box-shadow: 0 0 12px rgba($black, .66);
  }
  
  #{$card-header-selector} {
    padding: 3rem 2rem 2rem;
    text-align: center;
  }

  #{$logo-selector} {
    max-width: 100%;
    height: 2.5rem;
  }
  
  #{$form-selector} {
    padding: 0 2rem;
  }

  #{$banner-selector} {
    margin-bottom: 1rem;
  }

  #{$form-control-selector} {
    margin-bottom: 1rem;
  }

  #{$form-footer-selector} {
    padding: 1.5rem 0 3rem;
    display: flex;
    align-items: center;
  }

  #{$form-submit-button-selector} {
    --ec-button-color-primary: var(--ec-color-brand-green);
    margin-left: auto;
  }
  
  #{$card-footer-selector} {
    border-top: 1px solid var(--ec-border-color);
    padding: 1rem;
    display: flex;
    align-items: center;
  }
}
