/**
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */
/* stylelint-disable */
// Config
@import "@scss/config/_settings";
@import "@scss/config/_keyframes";
@import "@scss/config/_bootstrap";
/* stylelint-enable */

body,
html {
  height: 100%;
  min-height: 100%;
  font-size: var(--#{$cdk}size-16);
}

label {
  font-size: var(--#{$cdk}size-14);
  font-weight: 500;
}

#login-panel {
  width: 460px;
  margin: 0 auto;

  @include media-breakpoint-down(sm) {
    width: 90%;
  }

  #login-header {
    padding-top: var(--#{$cdk}size-64);
    margin-bottom: var(--#{$cdk}size-40);
    color: var(--#{$cdk}primary-600);

    #logo {
      opacity: 0.2;
    }

    .login__version {
      font-size: var(--#{$cdk}size-14);
    }

    @include media-breakpoint-down(xs) {
      padding-top: var(--#{$cdk}size-40);
      margin-bottom: var(--#{$cdk}size-32);
    }
  }

  #shop-img {
    margin-bottom: var(--#{$cdk}size-16);
    text-align: center;

    img {
      max-width: 100%;
      height: auto;
    }
  }

  #login-content-card {
    padding: var(--#{$cdk}size-40) var(--#{$cdk}size-40) var(--#{$cdk}size-20) var(--#{$cdk}size-40);
    margin-top: var(--#{$cdk}size-40);
    box-shadow: var(--#{$cdk}box-shadow-md);

    .card-body {
      padding: var(--#{$cdk}size-0);
    }

    .submit-widget button {
      width: 100%;
      text-transform: uppercase;
    }

    #login_form {
      .checkbox-widget {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: var(--#{$cdk}size-8);
        align-items: center;
        justify-content: space-between;

        .form-checkbox {
          margin: 0;
        }

        #forgot-password-link {
          padding: var(--#{$cdk}size-0) var(--#{$cdk}size-0) var(--#{$cdk}size-2) var(--#{$cdk}size-0);
          font-size: var(--#{$cdk}size-14);
          font-weight: 400;
        }

        label {
          font-weight: 400;
          vertical-align: top;
        }
      }
    }

    h4 {
      text-align: center;
    }

    // Hide required asterisks
    .required {
      span.text-danger {
        display: none;
      }
    }

    @include media-breakpoint-down(xs) {
      padding: var(--#{$cdk}size-24) var(--#{$cdk}size-16) var(--#{$cdk}size-8) var(--#{$cdk}size-16);
      margin-top: var(--#{$cdk}size-32);
    }
  }

  #login-footer {
    font-size: var(--#{$cdk}size-14);

    a {
      color: var(--#{$cdk}primary-500);
    }

    .login__copy {
      margin-bottom: var(--#{$cdk}size-16);
      font-size: var(--#{$cdk}size-14);
    }

    .login__social {
      display: flex;
      gap: var(--#{$cdk}size-8);
      align-items: center;
      justify-content: center;
      font-size: var(--#{$cdk}size-16);
    }
  }

  .login-back {
    position: fixed;
    top: var(--#{$cdk}size-16);
    left: var(--#{$cdk}size-16);
    display: flex;
    gap: var(--#{$cdk}size-4);
    align-items: center;
    font-size: var(--#{$cdk}size-16);
    color: var(--#{$cdk}primary-800);

    &-shop {
      font-weight: 600;
    }

    &:hover,
    &:focus {
      text-decoration: none;

      .login-back-shop {
        text-decoration: underline;
      }
    }

    @include media-breakpoint-down(sm) {
      span {
        display: none;
      }
    }
  }
}
