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

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

    &.fullscreen {
      .@{horizontal-board-prefix}__top {
        height: 0;
      }

      .@{horizontal-board-prefix}__center {
        height: 100%;

        .@{horizontal-board-prefix}__center-left {
          width: 100%;
        }

        .@{horizontal-board-prefix}__center-right {
          width: 0;
        }
      }

      .@{horizontal-board-prefix}__bottom {
        height: 0;
      }
    }

    &__top {
      width      : ~'calc(100% + 8px)';
      height     : 98px;
      margin     : 0 -4px;
      white-space: nowrap;
      transition : height 0.4s ease;
    }

    &__center {
      width     : ~'calc(100% + 8px)';
      height    : ~'calc(66% - 98px)';
      margin    : 0 -4px;
      transition: height 0.4s ease;

      &-left {
        float     : left;
        width     : 50%;
        height    : 100%;
        transition: width 0.4s ease;
      }

      &-right {
        float     : right;
        width     : 50%;
        height    : 100%;
        transition: width 0.4s ease;

        &.full_width {
          width: 100%;
        }
      }
    }

    &__bottom {
      width      : ~'calc(100% + 8px)';
      height     : 34%;
      margin     : 0 -4px;
      white-space: nowrap;
      transition : height 0.4s ease;
    }
  }
}