@import '../../core/variables.less';
@import '../../core/page.less';
@import '../../core/table.less';
@import '../../core/global.less';
@import '../../core/filter.less';

@top-height: 50px;

.right-container {
  position: absolute;
  left: @xm-left-width;
  top: @top-height;
  right: 0;
  bottom: 0;
  background-color: #f0f2f5;
  overflow-x: scroll;
  z-index: 1;
  height: calc(~'100% - 50px');
  &.right-container-vertical {
    left: @xm-left-min-width;
    .page {
      .page {
        left: @xm-left-min-width;
      }
    }
  }
  &.has_banner {
    .page {
      .page {
        top: 100px;
      }
    }
  }
  > .right {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    min-height: 100%;
    overflow-y: auto;
    min-width: 1050px;
  }
}

.right-container {
  // min-width: 1186px;
  &:before {
    content: ' ';
    height: 1px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  .right {
    .normal-content {
      padding-bottom: 50px;

      .body {
        > div {
          // 页面标题头
          section.content-header {
            .xm-btn {
              margin-left: 15px;
            }
            h1 {
              font-size: 16px;
              color: #898989;
              font-weight: normal;
              padding: 15px;
              display: inline-block;
            }

            &.selectable {
              margin: 15px;
              padding: 0;
              h1 {
                box-sizing: border-box;
                cursor: pointer;
                display: inline-block;
                background: #fff;
                padding: 0;
                border: 1px solid @border;
                border-right: 0;
                font-weight: bold;
                a {
                  padding: 8px 30px;
                  font-weight: bold;
                }

                &.on {
                  border: 1px solid @primary;
                  background: @primary;
                  color: #fff;
                }

                &:nth-child(1) {
                  border-top-left-radius: 4px;
                  border-bottom-left-radius: 4px;
                }
                &:nth-last-child(1) {
                  &.on {
                    border-right: 1px solid @primary;
                  }
                  border-right: 1px solid @border;
                  border-top-right-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
              }

              &.multiple {
                h1 {
                  &.on {
                    border-left: 1px solid @border;
                  }
                }
              }

              &.with-arrow {
                border: 1px solid @xm-color-border;
                display: inline-block;
                font-size: 0;
                border-radius: 10px;
                overflow: hidden;
                h1 {
                  display: inline-block;
                  padding: 0px 24px;
                  margin: 0;
                  cursor: default;
                  font-size: 15px;
                  line-height: 42px;
                  font-weight: bold;
                  position: relative;
                  background: #fff;

                  &:before,
                  &:after {
                    position: absolute;
                    content: ' ';
                    border: 22px solid transparent;
                    border-left: 15px solid #fff;
                    width: 0;
                    height: 0;
                    left: 99%;
                    top: 0;
                    z-index: 100;
                  }

                  &:after {
                    border-left: 15px solid #eee;
                    left: 100%;
                    z-index: 99;
                  }

                  &.on {
                    background: @primary;

                    &:before {
                      position: absolute;
                      content: ' ';
                      border: 23px solid transparent;
                      border-left: 17px solid @primary;
                      width: 0;
                      height: 0;
                      left: 100%;
                      top: -1px;
                      z-index: 100;
                    }

                    &:after {
                      display: none;
                    }
                  }

                  &:nth-last-child(1) {
                    &:before {
                      display: none;
                    }
                  }
                }
              }
            }
          }

          // 右侧容器样式
          .box {
            padding: 16px;
            margin: 0 16px;
            background: #ffffff;
            box-shadow: 0 2px 4px #ccc;
          }
        }
      }
    }
  }
}
