// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "bootstrap";
@import "active_admin/mixins";
@import "login_page.scss";
@import "buttons.scss";

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

body.logged_out {
  background-color: white;
  .flash {
    margin: 0 auto;
    position: relative;
    width: 450px;
  }
  .login-content {
    max-width: 450px;
    position: relative;
    margin: 0 auto;
  }
  .btn-facebook {
    background: #4267b2;
    color: white;

    .facebook-icon {
      width: 20px;
      margin-bottom: 1px;
      margin-right: 2px;
    }
  }

  .btn-google_oauth2 {
    background: #4285F4;
    color: white;

    .google_oauth2-icon {
      width: 20px;
      margin-bottom: 1px;
      margin-right: 2px;
    }
  }

  .login-tag {
    color: grey;
    font-size: 13px;
    margin-bottom: 0;
    position: relative;
    top: 8px;
  }
  #content_wrapper {
    #active_admin_content {
      box-shadow: none;
      .logo {
        font-size: 0;
        box-shadow: none;
        color: #0069ff;
        background-image: url('/images/affinity-logo.svg');
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 90px;
        text-shadow: none;
        border: none;
        margin: 0;
        padding: 0.5em 1em;
        background-color: transparent;
        font-weight: normal;
      }

      .action input[type="submit"] {
        font-size: 1.3em;
        padding: 1em 2em;
        border-radius: 0.25em;
        background-image: none;
        background-color: #88c440;
        color: white;
        text-shadow: none;
        box-shadow: none;
        border: none;
        font-weight: normal;
      }

      fieldset li {
        text-align: center;
        width: 100%;
      }
    }
  }
  h3 {
      margin-top: 1em;
  }
  .password-form-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      #error_explanation {
          @extend .error_box;
          h2 {
              display: none;
          }
          li {
              list-style-type: none;
              margin: 1rem 0 0 -1rem;
          }
      }
      .field_with_errors {
          width: 100%;
      }
      input#person_email {
          @extend .form-control;
          width: 100%;
      }
  }
}

.error_box {
    border: 1px solid $red;
    margin-top: 1.5rem;
    border-radius: .5rem;
    color: $red;
    background-color: lightpink;
}

.flash_error {
    @extend .error_box;
    padding: 1rem;
    margin-top: 2rem!important;
}
