@import (reference) '../styles/custom.less';
@import (reference) '../styles/modules/variables.less';

.UserHeaderLoading {
  background-color: #f3f4f6;

  &__container {
    display: flex;
    margin: 0 auto;
    max-width: 1011px;
    padding: 30px 0 30px 20px;
    flex-direction: column;
    align-items: center;
    height: 282px;

    .ant-card-loading-block {
      margin-bottom: 10px;
    }
  }

  &__avatar {
    margin: 0;
  }

  &__user {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media @small {
  .UserHeaderLoading {
    &__container {
      flex-direction: initial;
      align-items: initial;
      padding: 28px 0;
      padding-left: 16px;
      height: auto;

      .ant-card-loading-block {
        margin-bottom: 0;
      }
    }

    &__avatar {
      margin: 0 20px 0 0;
    }

    &__user {
      display: block;
      flex-direction: initial;
      align-items: initial;
    }
  }
}

@media @large {
  .UserHeaderLoading__container {
    padding-left: 0;
  }
}

@import 'UserHeaderLoading-nightmode';
