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

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

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

        .@{vertical-board-prefix}__left-top {
          height: 100%;
        }

        .@{vertical-board-prefix}__left-bottom {
          height: 0;
        }
      }

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

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

      &-top {
        width     : 100%;
        height    : 55%;
        transition: height 0.4s ease;
      }

      &-bottom {
        width     : 100%;
        height    : 45%;
        transition: height 0.4s ease;
      }
    }

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