@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

.auth {
  @include flexCenter(flex-start);
  @include bg-image("../../../assets/images/auth_bg.png");

  flex-direction: column;
  align-items: flex-end;
  padding: 4rem;
  min-height: 100dvh;
  background-position: left;
  background-attachment: fixed;

  @include media("lg") {
    @include bg-image("../../../assets/images/auth_bg_mo.png");

    justify-content: flex-end;
    align-items: center;
    padding: 1.6rem;
    background-attachment: fixed;
  }

  &--default {
    @include flexCenter();

    flex-direction: column;
    gap: 4rem;
    width: 100%;
    height: 100%;
  }

  &__inner {
    @include flexCenter();

    flex: 1;
    flex-direction: column;
    padding: 6rem;
    width: 100%;
    max-width: 63.6rem;
    border-radius: 2rem;
    background: theme-color($container);
    border: 1px solid theme-color($border-mid);
    backdrop-filter: blur(4rem);

    @include media("lg") {
      flex: none;
      padding: 4rem 1.6rem;
      max-width: 100%;
      min-height: 28rem;
      border-radius: 1.2rem;

      &--signup {
        flex: 1;
      }
    }
  }

  &__wrap {
    @include flexCenter();

    flex: 1;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    width: 100%;

    @include media("lg") {
      gap: 3.2rem;
    }
  }

  &__logo {
    @include flexCenter();

    width: 18.3rem;
    height: 6rem;
    background: url("../../images/logo.svg") no-repeat center center / contain;
    transform-origin: center top;
    will-change: transform, width;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;

    [data-theme="light"] & {
      background: url("../../images/logo_light.svg") no-repeat center center / contain;
    }

    @include media("lg") {
      width: 14.8rem;
      height: 4.8rem;
    }

    img {
      @include img-fit(contain);
      pointer-events: none;
    }
  }

  &__title {
    @include typography("h1");

    font-weight: 700;
    color: theme-color($text-high);

    @include media("lg") {
      font-size: 3.2rem;
      line-height: 4.8rem;
    }
  }

  &__desc {
    @include typography("h3");

    color: #b0b6be;

    strong {
      font-weight: 600;
      color: theme-color($text-high);
    }
  }


  .input-text {
    background: theme-color($border-mid);
    border-color: theme-color($border-mid);
    color: theme-color($text-high);

    &:hover,
    &:focus {
      border-color: theme-color($primary);
    }
  }
}

.login {
  &__form-wrapper {
    @include flexCenter();

    flex-direction: column;
    width: 100%;
  }

  &__form {
    width: 100%;
    text-align: right;

    &-item {
      text-align: left;

      & + & {
        margin-top: 3.2rem;

        @include media("lg") {
          margin-top: 2.4rem;
        }
      }

      &-wrap {
        display: flex;
        gap: 0.8rem;

        .btn-primary {
          flex-shrink: 0;
          width: 6.8rem;
          height: 5.6rem !important;
          font-weight: 700;
          font-size: 1.6rem !important;
          line-height: 2.6rem !important;

          @include media("lg") {
            height: 4.8rem !important;
          }
        }
      }
    }

    &-label {
      display: block;
      margin-bottom: 0.8rem;
      color: theme-color($text-high);
      font-weight: 500;

      @include media("lg") {
        margin-bottom: 0.4rem;
      }
    }

    .input-text {
      background-color: theme-color($border-mid);
      border-color: theme-color($border-mid);

      [data-theme="light"] & {
        border-color: #e5e5e5;
      }

      &:hover,
      &:focus {
        border-color: theme-color($primary) !important;
      }
    }

    &-btn {
       * + & {
        margin-top: 4rem;

        &--request {
          margin-top: 1.6rem;
        }

        @include media("lg") {
          margin-top: 3.2rem;
        }
      }

      .btn-primary {
        @include media("lg") {
          height: 4.8rem !important;
        }
      }
    }

    &-link {
      margin-top: 0.8rem;
      color: #b0b6be !important;
      background: transparent;
    }

    &-text {
      @include flexCenter();

      gap: 0.4rem;
      margin-top: 0.8rem;

      span {
        color: #b0b6be;
      }

      &-link {
        color: theme-color($primary) !important;
        font-weight: 700;
        text-decoration: underline;
        text-underline-position: under;
        background: transparent;
      }
    }

    &-error {
      @include typography("p2");

      display: block;
      margin-top: 0.4rem;
      color: #ff4d4f !important;
    }

    &-agree {
      margin-top: 0.8rem;

      .checkset__label {
        color: #b0b6be;
        font-weight: 400;

        strong {
          color: theme-color($text-high);
          font-weight: 700;
        }
      }
    }
  }

  &__eye-wrap {
    position: relative;

    & + & {
      margin-top: 0.8rem;
    }
  }

  &__eye {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    translate: 0 -50%;
  }
}