/*
* @section      Style for login wrapper
* @description  This section holds specific style redeclarations for
*               login content wrapper
*/
.jx-header-account {
  > a {
    color: $black;

    i {
      font-size: 24px;
      line-height: 1;
    }

    span {
      display: none;
    }

    @include hover-focus-active {
      color: $brand-primary;
    }
  }

}

.jx-header-account-wrapper {

  .dropdown & {
    padding: 30px;
    width: 320px;
    @include media-breakpoint-up(md) {
      width: 568px;
      padding: 65px 65px 50px;
    }
  }

  @include media-breakpoint-up(md) {
    &.twocolumns {
      .user-data {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        img {
          flex: 0 0 30%;
          max-width: 30%;
          margin-right: 20px;
          border: 2px solid $border-color;
        }

        h3 {
          order: 1;
        }
      }

      .header-account-content > ul {
        column-count: 2;
        column-gap: 20px;
        list-style-position: inside;
      }
    }
  }
  @include media-breakpoint-down(sm) {
    .user-data {
      text-align: center;

      img {
        width: 70%;
      }
    }
  }
  @include media-breakpoint-only(sm) {
    .user-data img {
      width: 60%;
    }
  }

  .header-login-content {
    display: none;

    &.active {
      display: block;
      max-height: none;
      overflow: visible;
    }
  }

  .social-login-buttons {
    a {
      font-size: 20px;
      line-height: 1;
      color: $gray-61;
      @include hover-focus-active {
        color: $black;
      }
    }
  }

  footer {
    text-align: center;

    .register-link {
      margin-top: 10px;
    }
  }

  .radio-inline {
    margin-right: 20px;

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

    .custom-radio {
      margin-right: 0;
    }
  }
}

/*
* @section      Style for login wrapper
* @description  This section holds specific style redeclarations for
*               login content wrapper
*/

#wrapper, #footer {
  .jx-header-account-wrapper {
    padding: 20px;
    max-width: 100%;
    margin-bottom: 30px;
    background: #ffffff;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);

    [class^="col-"], [class*=" col-"] {
      width: 100%;
      flex: 0 0 100%;
      text-align: left;
    }
  }
}

.main-help-block ul:empty {
  display: none;
}

/**
* @section   Style for header account modal
 */
[id*='jxha-modal-'] {
  &:not(.left):not(.right) {
    .modal-body {
      @include media-breakpoint-up(md) {
        padding: 65px 65px 50px;
      }
    }
  }

  &.left, &.right {
    .modal-body {
      @include media-breakpoint-up(md) {
        padding: 50px 30px;
      }
    }
  }
}