@import '../../style/theme.less';

.@{pro-layout-page-container-prefix-cls} {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;

  &-content {
    border-radius: 2px;
    flex: 1;

    .ant-spin-nested-loading > div > .ant-spin {
      max-height: calc(100vh - 50px);
    }
  }

  &-content-lucency {
    // hack important
    background: transparent !important;
  }

  &-content-ghost {
    // hack important
    background: transparent !important;
  }

  &-content-fixed {
    overflow: auto;

    .@{pro-layout-page-container-prefix-cls}-wrapper-loading,
    .@{ant-prefix}-spin-container {
      height: 100%;
    }
  }

  &-suspend {
    width: 36px;
    position: fixed;
    right: 12px;
    bottom: 126px;
    background: #ffffff;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
      0px 3px 6px -4px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    cursor: pointer;
    padding: 0 4px;
    font-size: 12px;
    z-index: 10;
    &-icon {
      font-size: 14px;
    }
    &-help,
    &-feedback {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 4px 0;
      color: #666666;
      line-height: 20px;
      &:hover {
        color: #666666;
        .@{pro-layout-page-container-prefix-cls}-suspend-icon {
          color: @primary-color-hover;
        }
      }
      &:active {
        color: #666666;
        .@{pro-layout-page-container-prefix-cls}-suspend-icon {
          color: @primary-color-active;
        }
      }
    }
    &-help + &-feedback {
      border-top: 1px solid #eeeeee;
    }
  }
}