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

  .@{small-board-prefix} {
    width : 100%;
    height: 100%;

    &.fullscreen {
      .@{small-board-prefix}__left {
        width: 100%;

        .@{small-board-prefix}__left-top {
          height: 0;
        }

        .@{small-board-prefix}__left-bottom {
          height: 100%;
        }
      }

      .@{small-board-prefix}__right {
        width: 0;
      }
    }

    &__left {
      float     : left;
      width     : ~'calc(100% - 320px + 4px)';
      height    : ~'calc(100% + 8px)';
      margin    : -4px 0 -4px -4px;
      transition: width 0.4s ease;

      &-top {
        width        : 100%;
        height       : 98px;
        padding-right: 4px;
        white-space  : nowrap;
        transition   : height 0.4s ease;
      }

      &-bottom {
        width     : 100%;
        height    : ~'calc(100% - 98px)';
        transition: height 0.4s ease;
      }
    }

    &__right {
      float     : right;
      width     : 320px;
      height    : ~'calc(100% + 8px)';
      margin    : -4px 0;
      transition: width 0.4s ease;

      &-top {
        width : 100%;
        height: 50%;
      }

      &-bottom {
        width : 100%;
        height: 50%;

        &.full_height {
          height: 100%;
        }
      }
    }
  }
}