$desktop-l-width: 1440px;
$tablet-l-width: 1024px;
$tablet-s-width: 768px;
$mob-l-width: 640px;

@mixin tab {
  @media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
    @content;
  }
}

.login {
  width: 100%;
  background-size: cover;
  height: calc(100% - 50px);
  background: #eaeff1;
  margin-top: 50px;
  overflow: hidden;
  /*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
  background: linear-gradient(to top, #93a3af, #eaeff1);*/

  .login-wrapper {
    flex: 1 0 auto;
    //background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
    background-size: 100% auto;
    position: relative;
  }
}

$main: #777;
$back: #aaa;
$accent: hsl(220, 50%, 40%);

$sans: 'Open Sans', sans-serif;
$heebo: 'Heebo', sans-serif;
$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';

$base: 3vh;

$time: 1800ms;

$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);

@mixin word-break-keep {
  word-break: keep-all;
}

.slider {
  position: relative;
  height: 100%;
  width: 100%;
  background: $main;
  overflow: hidden;

  &_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    top: 0%;
    left: 0;
    right: auto;
    overflow: hidden;
    transition: transform $time/4 $ease-in-out;
    transform-origin: 0% 50%;
    transition-delay: $time/4;
    opacity: 0;
    &-hacked {
      opacity: 1;
    }
  }

  &_back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: auto 100%;
    background-position: center;
    background-repeat: none;
    transition: filter $time/4 $ease-in-out;
  }

  &_inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    background-size: auto 133.3333%;
    background-position: center;
    background-repeat: none;
    transform: scale(0.7);
    transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
      opacity $time/4 step-end;
    opacity: 0;
    box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
    padding: $base * 3;
    box-sizing: border-box;
    border: 1px solid #ffffff;
  }
  &_header {
    display: flex;
    flex-flow: row;
    width: 40%;
    height: 20px;
    justify-content: center;
    font-size: $base * 0.6;
    color: #ffffff;
    .company-name {
      flex: 0 0 auto;
      padding-right: 20px;
    }
    .h-line {
      flex: 1 1 auto;
      align-self: center;
      height: 2px;
      border-bottom: 1px solid #ffffff;
    }
  }
  &_content {
    position: relative;
    top: 64%;
    width: 40%;
    transform: translateY(-50%);
    color: white;
    font-family: $hangul;
    opacity: 0;
    transition: opacity $time/4;
    h1 {
      font-weight: 900;
      font-size: $base * 1.24;
      line-height: 1.2;
      margin-bottom: $base/2;
      pointer-events: none;
      text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
      @include word-break-keep();
    }
    p {
      font-size: $base * 0.64;
      line-height: $base * 0.9;
      margin-bottom: $base/2;
      @include word-break-keep();
    }
  }
  &_link {
    cursor: pointer;
    position: absolute;
    display: flex;
    justify-content: center;
    justify-items: center;
    font-family: $heebo;
    font-size: 1.2rem;
    letter-spacing: $base * 0.1;
    font-weight: 100;
    display: block;
    bottom: 10%;
    color: #ffffff;
    padding: 10px 60px 10px 30px;
    border-radius: 100px;
    color: #00dbed;
    width: $base * 5;
    // next버튼 숨김
    display: none;
    &:before {
      content: '';
      border-top: 1px solid white;
      border-right: 1px solid white;
      display: block;
      width: $base/3;
      height: $base/3;
      transform: translateX(0) translateY(-50%) rotate(45deg);
      position: absolute;
      font-family: $heebo;
      font-weight: 100;
      top: 50%;
      left: $base * 4;
    }
    &:hover {
      background-color: #134a67;
      color: #ffffff;
    }
  }

  &_slide {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    transition: transform $time/3 $ease-in-out;
    transition-delay: $time/3;
    pointer-events: none;
    z-index: 0;

    &-active {
      transform: translatex(0%);
      z-index: 2;
      .slider_wrap {
        transform: translateX(0);
        transform-origin: 100% 50%;
        opacity: 1;
        animation: none;
      }
      .slider_back {
        filter: blur(#{$base * 0.2});
        transition: filter $time/2 $ease-in-out;
        transition-delay: $time/2 !important;
      }
      .slider_inner {
        transform: scale(0.7);
        box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
        pointer-events: auto;
        opacity: 1;
        transition: transform $time/2 $ease-in-out,
          box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
        transition-delay: $time/2;
      }
      .slider_content {
        opacity: 1;
        transition-delay: $time * 3/4;
      }
    }

    &:not(.slider_slide-active) .slider_wrap {
      @keyframes hack {
        0% {
          transform: translateX(0);
          opacity: 1;
        }
        50% {
          transform: translateX(-100vw);
          opacity: 1;
        }
        51% {
          transform: translateX(-100vw);
          opacity: 0;
        }
        52% {
          transform: translateX(100vw);
          opacity: 0;
        }
        100% {
          transform: translateX(100vw);
          opacity: 1;
        }
      }
      animation-name: hack;
      animation-duration: $time/2;
      animation-delay: $time/4;
      animation-timing-function: $ease-in-out;
    }

    &:nth-child(1) .slider_back,
    &:nth-child(1) .slider_inner {
      // background-image: url(/assets/images/login/bg_login01.png);
      //background: #eee;
    }
    &:nth-child(2) .slider_back,
    &:nth-child(2) .slider_inner {
      // background-image: url(/assets/images/login/bg_login02.png);
      //background: #aaa;
    }
    &:nth-child(3) .slider_back,
    &:nth-child(3) .slider_inner {
      // background-image: url(/assets/images/login/bg_login03.png);
      //background: #888;
    }
  }
}

::ng-deep .login-form-box {
  position: absolute;
  width: 26vw;
  height: 70%;
  top: 15%;
  right: 15%;
  display: flex;
  justify-content: flex-end;
  z-index: 100;
  @media screen and (max-width: #{$desktop-l-width}) {
    width: 28vw;
  }

  @media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
    width: 34vw;
  }
  .mat-form-field {
    padding-top: 20px;
    .mat-form-field-wrapper {
      padding-bottom: 0;
      .mat-form-field-infix {
        padding-top: 0;
        border: 0;
      }
      .mat-form-field-label-wrapper {
        top: -1.4em;
      }
      .mat-form-field-underline {
        bottom: 0;
      }
      //min-size 반응형 적용
      @include tab {
        .mat-form-field-infix {
          input {
            font-size: 0.9em;
          }
        }
        .mat-form-field-label-wrapper {
          font-size: 0.9em;
        }
        .mat-form-field-subscript-wrapper {
          .mat-error {
            font-size: 0.8em;
          }
        }
        &.mat-focused,
        &:not(.mat-form-field-hide-placeholder) {
          .mat-form-field-label-wrapper {
            font-size: 0;
          }
        }
      }
    }
  }
  .error-container {
    padding-top: 10px;
  }
}

@media all and (max-width: 1400px) {
  .slider {
    &_content {
      transform: translateY(-50%);
      color: white;
      font-family: $heebo;
      opacity: 0;
      transition: opacity $time/4;
      h1 {
        font-weight: 900;
        font-size: $base * 1.2;
        margin-bottom: $base;
      }
      p {
        display: none;
      }
    }
    &-active {
      .slider_inner {
        transform: scale(0.9);
      }
    }
  }
}