Dwinzo_dev/app/src/styles/pages/userAuth.scss

@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-color);
  height: 100vh;
  background-color: var(--background-color);
  background-color: #fcfdfd;
  position: relative;
  z-index: 1;
  .logo-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    @include flex-center;
  }

  h1 {
    color: var(--text-color);
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: var(--font-weight-medium);
  }

  p {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 20px;

    .link {
      color: var(--accent-color);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 350px;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--accent-color);
    border-radius: #{$border-radius-extra-large};
    background: transparent;
    color: var(--accent-color);
    font-size: 14px;
    outline: none;
    cursor: pointer;

    .google-icon {
      color: var(--accent-color);
      font-weight: bold;
      font-size: 16px;
      margin-right: 10px;
    }

    &:hover {
      background: var(--background-color);
    }
  }

  .error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 350px;

    input {
      width: 100%;
      padding: 10px 18px;
      margin-bottom: 10px;
      border: 1px solid var(--border-color);
      border-radius: #{$border-radius-extra-large};
      background: var(--background-color);
      font-size: 14px;
      color: #333;

      &:focus {
        border-color: var(--accent-color);
        outline: none;
      }
    }

    .password-container {
      position: relative;
      width: 100%;

      .toggle-password {
        @include flex-center;
        position: absolute;
        top: 20px;
        right: 10px;
        height: 22px;
        width: 22px;
        transform: translateY(-50%);
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 16px;
      }
    }

    .continue-button {
      width: 100%;
      padding: 10px;
      background: var(--accent-gradient-color);
      color: var(--background-color);
      font-size: 14px;
      border: none;
      outline: none;
      border-radius: #{$border-radius-extra-large};
      cursor: pointer;

      &:hover {
        opacity: 0.9;
      }
    }
  }
  .policy-checkbox {
    @include flex-center;
    gap: 6px;
    margin: 18px 0;
    margin-top: 8px;
    justify-content: flex-start;
    width: 100%;
    padding: 0 6px;
    input {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: var(--accent-color);
    }
  }

  .policy {
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
    line-height: 1.5;
    width: 320px;
    text-align: center;

    .link {
      color: var(--accent-color);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
    &::after {
      content: "";
      position: absolute;
      background: radial-gradient(
        circle,
        #bfe0f8 0%,
        #e9ebff 46%,
        #e2acff 100%
      );
      height: 50vh;
      width: 50vw;
      top: 0;
      left: 0;
      top: 50%;
      left: 50%;
      opacity: 0.5;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      filter: blur(200px);
      z-index: -1;
    }
  }
}