// Core variables and mixins
@import "_variables.less";
// Custom for this template
@import "bootstrap_addons/_mixins.less";
//=======================
// Social Module Shell
//=======================
.login_shell {
  background: @globalColor;
  button {
    vertical-align: inherit;
  }
  .moduleTitle {
    color: inherit;
  }
  .controls {
    text-align: center;
  }
  .control{
    position: relative;
  }
  form {
    margin-bottom: 0;
  }
  input[type=text],
  input[type=password] {
    border: none;
    width: 100%;
  }
  .input-prepend {
    display: block;
  }
  .add-on {
    border: none;
  }
  * + .mod-login_submit {
    margin: 0px;
  }
  .btn{
    margin-bottom: @inputMarginBottom;
    vertical-align: middle;
  }

  .mod-login_submit{
  }

  .btn-primary {
    background: @white;
    color: @headingsColor;
    text-shadow: none;
    &:hover {
      background: @headingsColor;
      color: @white;
    }
  }
  label.checkbox {
    cursor: inherit;
    display: inline-block;
    span.checkbox input[type="checkbox"] {
      position: relative;
      z-index: 2;
    }
  }
  a {
    color: @white;
  }
  .reset_remind {
    margin: 10px 0 0px;
    a {
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .login-greeting {
    a {
      font-size: 18px;
      font-weight: 500;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

//Social Buttons

div[class*="lr_social_login_basic"] {
  > a {
    display: none;
  }
}

* + .lr_social_login_basic_150 {
  margin-top: 20px;
}

.lr_social_login_basic_150 {
  width: 100% !important;
  .lr_providers {
    .lr_icons_box {
      float: none !important;
      width: 100% !important;
      div {
        float: none !important;
        margin: 0 0 10px !important;
      }
    }
    .lr_providericons {
      .border-radius(3px);
      color: #FFF;
      display: block;
      font-weight: 500;
      height: 40px !important;
      line-height: 40px;
      position: relative;
      text-align: center;
      .transition(.2s);
      width: auto !important;
      z-index: 1 !important;
      &:before {
        display: inline-block;
        font-family: @fa;
        font-size: 21px;
        vertical-align: middle;
      }
      &:hover {
        .scale(1.05);
      }
    }
    .lr_facebook {
      background: #3B5998 !important;
      &:before {
        content: '\f09a';
        margin-right: 13px;
      }
    }
    .lr_google {
      background: #DF4A32 !important;
      &:before {
        content: '\f0d5';
        margin-right: 9px;
      }
    }
  }
}

// =======================
// Fixed Sidebar Right
// =======================

@sidebarIconWidth: 60px;
@sidebarIconHeight: 60px;
@sidebarIconFontSize: 18px;

div#fixed-sidebar-right {
  bottom: 0;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  width: 0;
  z-index: 1034;
  .moduletable.login {
    .box-sizing(border-box);
    color: @white;
    right: 0;
    position: absolute;
    top: 150px;
    width: 0;
    left: auto;
    transition: width .2s ease;
    > i.fa-user {
      .border-radius(3px 0 0 3px);
      color: @white;
      cursor: pointer;
      font-size: @sidebarIconFontSize;
      height: @sidebarIconHeight;
      left: -@sidebarIconWidth;
      line-height: @sidebarIconHeight;
      position: absolute;
      text-align: center;
      top: 0;
      width: @sidebarIconWidth;
      background: @globalColor;
      .transition(all .2s ease);
      &:hover {
        font-size: @sidebarIconFontSize+4;
      }
    }
    input {
      color: @inputColor;
    }
    &.shown {
      width: 331px;
      bottom: 0;
      .mod_login_wrapper {
        overflow: auto;
        padding: 22px 30px 40px;
        width: 331px;
        right: 0;
        transition: width 0s linear 0s, padding 0s linear 0s, right 0s linear 0s;
      }
    }
    .mod_login_wrapper {
      .box-sizing(border-box);
      max-height: 100%;
      position: relative;
      right: 331px;
      width: 0;
      padding: 22px 0px 15px;
      overflow: hidden;
      background: @globalColor;
      transition: width 0s linear .2s, padding 0s linear .2s, right 0s linear .2s;
      .input-prepend .add-on:hover i {
        background: transparent;
        color: @globalColor;
      }
    }
  }
}

// =======================
// IceMegaMenu
// =======================
.menu-login-form {
  > ul:before {
    .triangle(top, 22px, 11px, #777);
  }
  .icemega_modulewrap.login_megamenu {
    background: #777;
    padding: 15px;
    .input-prepend .add-on span {
      color: #000;
    }
  }
}

@media (max-width: 767px) {
  .login_shell {
    .control-group + * {
      margin-top: 10px;
    }
    label.checkbox {
      padding-top: 0;
    }
    .reset_remind {
      margin: 10px 0;
    }
  }
}

@media screen and (max-height: 550px) {
  #style_switcher,
  div#fixed-sidebar-right .moduletable.login {
    padding-bottom: 10px;
    bottom: 0;
    .mod_login_wrapper {
      max-height: 100%;
    }
  }
}

@media (max-width: 479px) {
  div#fixed-sidebar-right .moduletable.login {
    .mod_login_wrapper {
      right: 280px;
    }
    &.shown{
      width: 280px;
      .mod_login_wrapper {
        padding-left: 20px;
        padding-right: 20px;
        width: 280px;
        right: 0;
      }
    }
  }
}