:global {
  @board-page-prefix: board-page;

  .@{board-page-prefix} {
    width   : 100%;
    height  : 100%;
    overflow: hidden;

    &__configure {
      width      : 100px;
      height     : 28px;
      background : rgba(255, 255, 255, 0.8);
      overflow   : hidden;
      white-space: nowrap;
      position   : absolute;
      top        : 0;
      right      : 0;
      transform  : translate(18px, 18px);
      z-index    : 10;
      box-shadow : -1px 2px 8px 0px rgba(0, 0, 0, 0.3);
      transition : all .4s ease;

      &.configure {
        width: 200px;
      }

      &-btn {
        display    : inline-block;
        width      : 100px;
        height     : 28px;
        line-height: 28px;
        text-align : center;
        cursor     : pointer;

        span {
          padding: 0 8px;
        }

        &:last-child {
          border-left: 1px solid #f2f2f2;
        }
      }
    }

    &__layout {
      width     : ~'calc(200% + 8px)';
      height    : 100%;
      transition: all .4s ease;

      &.configure {
        transform: translateX(~'calc(-50% - 4px)');
      }

      &-main {
        float : left;
        width : ~'calc(50% - 4px)';
        height: 100%;
      }

      &-set {
        float : right;
        width : ~'calc(50% - 4px)';
        height: 100%;
      }
    }

    &__fake-board {
      width          : 100%;
      height         : ~'calc(100% - 16px)';
      padding-top    : 8px;
      display        : flex;
      flex-direction : column;
      justify-content: space-around;
      align-items    : center;

      .ant-skeleton>.ant-skeleton-content>.ant-skeleton-paragraph {
        margin-bottom: 0;
      }
    }

    &__empty {
      width           : 100%;
      height          : 100%;
      text-align      : center;
      background-color: #ffffff;

      &-icon {
        position : relative;
        top      : 50%;
        transform: translateY(-50%);
        margin   : 0;

        .ant-empty-image {
          height: 60px;
        }
      }
    }
  }
}