/* Authentication
******************************************************************************* */

@import "../_bootstrap-extended/include";

$auth-basic-top-svg: "data:image/svg+xml,%3Csvg width='238' height='233' viewBox='0 0 238 233' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='88.5605' y='0.700195' width='149' height='149' rx='19.5' stroke='%237367F0' stroke-opacity='0.16'/%3E%3Crect x='0.621094' y='33.761' width='200' height='200' rx='10' fill='%237367F0' fill-opacity='0.08'/%3E%3C/svg%3E%0A";
$auth-basic-bottom-svg: "data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.30469' y='1.44312' width='178' height='178' rx='19' stroke='%237367F0' stroke-opacity='0.16' stroke-width='2' stroke-dasharray='8 8'/%3E%3Crect x='22.8047' y='22.9431' width='135' height='135' rx='10' fill='%237367F0' fill-opacity='0.08'/%3E%3C/svg%3E";

.authentication-wrapper {
  --#{$prefix}auth-basic-inner-max-width: 460px;

  display: flex;
  flex-basis: 100%;
  inline-size: 100%;
  min-block-size: 100vh;

  .authentication-bg {
    background-color: var(--#{$prefix}paper-bg);
  }

  @include media-breakpoint-down(xl) {
    &:not(.authentication-basic) .authentication-inner {
      block-size: 100vh;
    }
  }
  .authentication-inner {
    block-size: 100%;
    inline-size: 100%;
    margin-block: auto;
    margin-inline: 0;

    // authentication cover background styles
    .auth-cover-bg {
      position: relative;
      block-size: 100vh;
      inline-size: 100%;

      // authentication cover illustration height
      .auth-illustration {
        z-index: 1;
        max-block-size: 65%;
        max-inline-size: 65%;
      }
    }

    // authentication cover platform bg styles
    .platform-bg {
      position: absolute;
      block-size: 35%;
      inline-size: 100%;
      inset-block-end: 0%;
      inset-inline-start: 0%;
    }

    // authentication multisteps styles
    .auth-multisteps-bg-height {
      block-size: 100vh;

      // z-index for illustration
      & > img:first-child {
        z-index: 1;
      }
    }
  }

  &.authentication-basic {
    align-items: center;
    justify-content: center;
    .authentication-inner {
      position: relative;
      max-inline-size: var(--#{$prefix}auth-basic-inner-max-width);
      &::before {
        @include media-breakpoint-down(sm) {
          display: none;
        }
        position: absolute;
        background: var(--#{$prefix}primary);
        block-size: 233px;
        content: " ";
        inline-size: 238px;
        inset-block-start: -35px;
        inset-inline-start: -45px;
        mask-image: url($auth-basic-top-svg);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        :dir(rtl) & {
          inset-inline-start: -70px;
        }
      }
      &::after {
        @include media-breakpoint-down(sm) {
          display: none;
        }
        position: absolute;
        z-index: -1;
        background: var(--#{$prefix}primary);
        block-size: 180px;
        content: " ";
        inline-size: 180px;
        inset-block-end: -30px;
        inset-inline-end: -56px;
        mask-image: url($auth-basic-bottom-svg);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
      }
      .card {
        z-index: 1;
        @include media-breakpoint-up(sm) {
          padding: 1.5rem;
        }
        .app-brand {
          margin-block-end: 1.5rem;
        }
      }
    }
  }

  /* For two-steps auth */
  .auth-input-wrapper .auth-input {
    font-size: $large-font-size;
    max-inline-size: 50px;
    padding-inline: .4rem;
    @include media-breakpoint-down(sm) {
      font-size: $h5-font-size;
    }
  }
}

/* app-brand at he corner of page */
.auth-cover-brand {
  position: absolute;
  z-index: 1;
  inset-block-start: 2.5rem;
  inset-inline-start: 1.5rem;
}

/* Two Steps Verification
? Used for validation specific style as we have validated hidden field */
#twoStepsForm {
  .fv-plugins-bootstrap5-row-invalid .form-control {
    border-width: $input-focus-border-width;
    border-color: $form-feedback-invalid-color;
    box-shadow: none;
  }
}
@include media-breakpoint-down(sm) {
  .numeral-mask-wrapper .numeral-mask {
    padding: 0;
  }
  .numeral-mask {
    margin-inline: 1px;
  }
}