/**=====================
    Login css start
==========================**/

@use "../utils/variables" as *;

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  overflow: auto;
  background-repeat: no-repeat;
  background-size: cover;
  padding: calc(25px + 35 * (100vw - 320px) / 1600) 0;
  background-position: center;
  background-color: #F3F4F6;
  background: linear-gradient(227deg, #F3F4F6 0%, #d6d7d9 40%, #030712c0 100%);
  animation: animateBg 5s linear infinite;
  background-size: 400% 100%;

  [class*="badge-version-"] {
    &.badge {
      position: absolute;
      bottom: 30px;
      right: 30px;
    }
  }

  .ms-auto {
    @media (max-width: 1199px) {
      margin: 0 auto;
    }
  }

  .auth-main {
    width: 500px;
    margin: 0 auto;

    .forgot-pss {
      margin-top: 16px;
    }

    .back-to-home {
      display: flex;
      align-items: center;
      gap: 4px;
      line-height: 1;

      svg {
        width: 18px;
        height: 18px;
      }
    }

    .auth-card {
      border-radius: 25px;
      position: relative;
      padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
      background-color: #ffffff;
      box-shadow: 0 0 35px 2px rgba(0, 0, 0, 0.05);

      .login-img {
        height: auto;
        width: calc(120px + (150 - 120) * ((100vw - 320px) / (1920 - 320)));
      }

      .welcome {
        margin: 15px 0 30px;
        text-align: center;

        h3 {
          font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
          color: $dark-color;
          margin-bottom: 4px;
        }

        p {
          margin-bottom: 0;
          font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 400;
          line-height: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
          color: #808b97;
        }
      }

      .main {
        i {
          font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
          color: rgba($dark-color, 0.7);
          position: absolute;
          top: calc(4px + (5 - 4) * ((100vw - 320px) / (1920 - 320)));
          left: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
          z-index: 1;
          width: 17px;
          padding: 0;
          padding-right: calc(30px + (33 - 30) * ((100vw - 320px) / (1920 - 320)));

          svg {
            width: 20px;
            height: 20px;
          }
        }

        .eye,
        .eye-slash {
          left: unset;
          right: 35px;
        }

        .submit {
          display: block;
          cursor: pointer;
          border-radius: $border-radius;
          color: #ffffff;
          background-color: $dark-color;
          padding: 14px 10px;
          width: 100%;
          font-size: 16px;
          font-weight: 500;
          line-height: 1;
          margin-top: 20px;
        }

        .position-relative {
          width: 100%;

          .toggle-password {
            position: absolute;
            border: none;
            padding: 0;
            top: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320)));
            right: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
            left: unset;
            cursor: pointer;
          }
        }
      }

      .backward {
        font-size: 15px;
        margin: 0;
        padding: 0;
        color: $dark-color;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
        font-weight: 500;

        i {
          position: static;
          padding: 0;
          color: $dark-color;
          transform: translateX(0);
          transition: all 0.2s ease;
        }

        &:hover {
          i {
            transform: translateX(-5px);
            transition: all 0.2s ease;
          }
        }
      }
    }
  }

  .alert {
    &.alert-success {
      color: $success-color;
      background-color: rgba($success-color, 0.1);
      padding: 12px 16px;
      border-color: rgba($success-color, 0.5);
      border-radius: $border-radius;
    }
  }

  .form-group {

    .form-control,
    .form-select {
      &:focus {
        z-index: 0;
      }
    }

    .form-control {
      padding: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
      padding-left: calc(48px + (57 - 48) * ((100vw - 320px) / (1920 - 320)));

      &.input-icon {
        padding: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))) calc(48px + (57 - 48) * ((100vw - 320px) / (1920 - 320)));
      }
    }

    .form-check {
      label {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 400;
        margin: 0;
      }
    }
  }

  .form-terms {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 6px;
  }

  .forgot-pass {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    margin: 0;
    padding: 0;
    color: $dark-color;
    line-height: 1;
    font-weight: 500;
  }
}

.demo-credential {
  gap: calc(8px + 7 * (100vw - 320px) / 1600);
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 4px double rgba($primary-color, 0.4);
  margin-inline: -30px;
  padding: 30px 30px 0;

  @media (max-width: 450.98px) {
    grid-template-columns: repeat(2, 1fr);
  }

  &:has(.btn:nth-child(4)) {
    .btn {
      &:nth-child(3) {
        @media (max-width: 450.98px) {
          grid-area: unset;
        }
      }
    }
  }

  .btn {
    width: 100%;
    justify-content: center;
    background-color: unset;
    color: rgba($primary-color, 0.7) !important;
    border-color: rgba($primary-color, 0.2);
    text-transform: uppercase;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;

    &:nth-child(3) {
      @media (max-width: 450.98px) {
        grid-area: 2 / 1 / 3 / 3;
      }
    }

    &:hover,
    &:active {
      background-color: rgba($primary-color, 0.1);
      color: rgba($primary-color, 1) !important;
    }
  }

  ~.new-account {
    text-align: center;
    margin-block: 10px 0;
  }
}

@keyframes animateBg {

  0%,
  100% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 40% 0%;
  }
}

/**=====================
    Login css end
==========================**/