// Partial / Auth OG

.authentication{
  display:flex;
  color:$blue-grey-med;
  font-size:13px;
  line-height:19px;
  font-weight:400;

  .has-indent{
    padding-left:60px;
  }

  &.reverse{
    flex-direction:row-reverse;

    .authentication-sidebar{
      border-radius:0 3px 3px 0;
    }
    .authentication-content{
      border-radius:3px 0 0 3px;
    }
  }

  .authentication-sidebar{
    position:relative;
    display:block;
    overflow:hidden;
    width:33%;
    background:$subscribe-bg-blue-dark;
    background:-moz-linear-gradient(45deg, $subscribe-bg-blue-dark 0%, $subscribe-bg-blue-light 100%);
    background:-webkit-linear-gradient(45deg, $subscribe-bg-blue-dark 0%, $subscribe-bg-blue-light 100%);
    background:linear-gradient(45deg, $subscribe-bg-blue-dark 0%, $subscribe-bg-blue-light 100%);

    border-radius:3px 0 0 3px;
    padding:65px 50px 60px 50px;
    color:$white;

    .header{
      margin-bottom: 30px;

      .logo{
        width:auto;
        max-width:180px;
        margin-left:auto;
        margin-right:auto;
      }

      .logo-text-color {
        fill:$white !important;
      }
    }
    
    .plan{
      text-align:center;
      margin-bottom:30px;

      .title{
        font-size:19px;
        line-height:24px;
        margin-bottom:20px;
        text-transform:capitalize;
        color:$subscribe-color;
      }

      .description{
        font-size:14px;
        text-align:center;
        margin-bottom:47px;
      }

      .price{
        .amount{
          font-size:29px;
          line-height:34px;
          font-weight:600;
          color:$white;
        }

        .period{
          font-size:13px;
          line-height:19px;
          font-weight:400;
          color:$subscribe-color;

          &:first-child{
            margin-bottom:5px;
          }
        }

      }

      .icon{
        position:relative;
        display:block;
        width:50px;
        height:50px;
        margin-left:auto;
        margin-right:auto;
        font-size:0;
        line-height:0;
        margin-bottom:20px;
        
        svg{
          fill:$white;
        }
      }
    }

    .action{
      text-align:center;
      margin-bottom:47px;

      & > a{
        padding:8px 14px;
        line-height:15px;
        font-size:13px;
        font-weight:400;
      }
    }



  }

  .authentication-content{
    position:relative;
    width:67%;
    background:$white;
    border-radius:0 3px 3px 0;
    padding:67px 40px 50px 55px;

    a:not(.button){
      padding-bottom:2px;
      @include link-underline($blue-light, $red, 1.5);
      color:$black;
    }


    .authentication-transition{
      @extend %description;
      display:inline-block;
      font-size:16px;
      line-height:29px;
    
    }

    .form {
      box-shadow:none;
      border-radius:3px;
      background-color:$white;
      margin-top:0;
      margin-bottom:20px;

      .form-header{
        margin-bottom: 30px;

        & > .title{
          @extend %title;
          text-transform: capitalize;
          display:inline-block;
          font-size:24px;
          line-height:29px;
          margin-bottom:20px;
        }

        & > .description{
          @extend %description;
          display:block;
          font-size:14px;
          line-height:23px;
          margin-right:30px;
          max-width: 100%;
        }

      }



      .fields-group{
        margin-bottom:23px;
      }

      .fields-header{
        display:flex;
        
        .icon{
          display:flex;
          flex-shrink:0;
          align-items:center;
          width:60px;
    
          svg{
            display:block;
            width:40px;
            height:40px;
            fill:$blue-grey-med;
          }
        }
    
        .content{
          color:$blue-grey-med;
          font-size:13px;
          line-height:19px;
          font-weight:400;
          padding-right:35px;
    
          .title{
            display:inline-block;
            color:$blue-black;
            font-size:15px;
            font-weight:500;
            margin-bottom:0;

            &:last-child{
              margin-bottom:7px;
            }

          }

          p{
            margin-bottom:17px;
          }

        }
      }

      .fields-inline{
        display:table;
        width:100%;
        
        .field,
        .action{
          display:table-cell;
          vertical-align:middle;
          padding-bottom:20px;
        }
        
        .field{
          & > div{
            margin:0;
            padding-right:18px;
          }
          
          input{
            margin-bottom:0;
          }
        }

        .checkbox {
          display:flex;

          input{
            margin-right:5px;  
            margin-bottom:20px; 
          }

          p{
            margin-left:6px;
          }
          
        }
      }
      
      .fields-group + .actions{
        margin-top:-36px;
      }

      .actions{
        display:flex;
        align-items:center;

        button{
          flex-shrink:0;
        }

        .message-alert{
          align-items:middle;
          padding-top:0;
          font-size:12px;
          line-height:15px;

          & > div{
            transform-origin:center;
            transform:scale(0.8);
            margin-right:6px;
          }
        }

        .smooth-spinner{
          width:74px;
          height:74px;
          svg{
            padding:15px;
          }
        }
      }
    }

  }

}

@include breakpoint($tablet-landscape){
  .authentication{
    padding:40px;

    .authentication-sidebar{
      padding-top:49px;
    }

    .authentication-content{
      padding:50px 25px;

      .form{
        margin-bottom:0;

        .fields-group{
          margin-bottom:10px;
        }

        .fields-group + .actions{
          margin-top:-20px;
        }

        .actions{
          margin-bottom:0;
        }
      }
      
    }
  }
}

@include breakpoint($tablet-portrait){
  .authentication{
    .authentication-sidebar{
      .plan{
        .icon{
          margin-bottom:10px;
        }

        .price{
          .amount{
            font-size:23px;
            line-height:27px;
          }
        }
      }

      .action{
        margin-bottom:30px;
      }

      .description{
        margin-bottom:30px;

        &:last-child{
          margin-bottom:0;
        }
      }
    }
  }
}

@include breakpoint($phone){
  .authentication{
    flex-wrap:wrap;
    padding:20px;

    .has-indent{
      padding-left:0;
    }

    &,
    &.reverse{
      .authentication-sidebar{
        border-radius:3px 3px 0 0;
      }
  
      .authentication-content{
        border-radius:0 0 3px 3px;
      }
    }

    .authentication-sidebar{
      width:100%;
    }

    .authentication-content{
      width:100%;

      .form {
        
        .fields-header{
          &.no-icon{
            padding-left:0;
          }

          .content{
            padding-right:0;
          }

          .icon{
            display:none;
          }
        }

        .fields-inline{

          .field{
            display:block;
            padding-bottom:15px;

            & > div{
              padding-right:0;
            }
          }
        }

      }
    }

  }
}
