.app-control-kanban {
  &.app-control-kanban__row {
    .app-control-kanban__content {
      display: block;
      overflow-x:scroll;
      overflow-y:hidden;
      width:100%;
      height:100%;
      white-space:nowrap;
    }
    .app-control-kanban__content__group {
      width:360px;
      height: 100%;
      margin:0 5px;
      display:inline-block;
      overflow: auto;
      white-space: normal;
      &.is-folding {
        flex: none;
      }   
      &.app-control-kanban__content__group__close{
        .group__foldingarea .group__foldingarea__header {
          border-bottom: none;
        }
      }   
    }
    .app-control-kanban__content__group__close{
      height:100%;
      width:38px;
      margin:0 10px;
      overflow:hidden;
      .group__foldingarea{
        width:38px;
        height:100%;
        .group__foldingarea__header{
          height:100%;
          line-height:100%;
          position: relative;
          .foldingarea__header__icon{
            display:block;
            margin-top:8px;
          }
          .foldingarea__header__title{
            position: absolute;
            display: inline-block;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            margin: 0;
            flex-wrap: wrap;
            word-wrap: break-word;
            writing-mode: vertical-rl
          }
          &:hover{
            cursor: pointer;
          }
        }
      }

    }
    .group__foldingbar__ghost {
      z-index: -1;
      margin: 0px;
      border: none;
      padding: 0px;
      height: 0px;
      width: 10px;
      overflow: hidden;
    }
    .group__foldingbar__content {
      width: 40px;
      height: 100%;
      border-left: 0;
      text-align: center;
    }
    .foldingbar__content__icon {
      padding: 3px 0;
      font-size: 20px;
      &:hover {
        cursor: pointer;
      }
    }
    .foldingbar__content__title {
      overflow: hidden;
      margin: auto;
      display: flex;
      width: 31px;
      font-size: 17px;
      align-items: center;
      height: calc(100% - 36px);
    }
    .group__foldingarea {
      height: 100%;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
    }
    .group__foldingarea__header {
      height: 36px;
      padding: 0 8px;
      line-height: 36px;
      position: relative;
    }
    .foldingarea__header__icon {
      font-size: 20px;
      position: absolute;
      &:hover {
        cursor: pointer;
      }
    }
    .foldingarea__header__title {
      margin-left: 24px;
    }
    .foldingarea__header__action {
      float: right;
    }
    .header__action__content__item {
      &:nth-child(n + 2) {
        margin-top: 4px;
      }
    }
    .group__foldingarea__content {
      flex-grow: 1;
      height: 100%;
      overflow: auto;
    }
    .foldingarea__content__item {
      margin: 8px 8px 0 8px;
      padding: 8px;
      overflow: hidden;
    }
    .foldingarea__content__empty {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &.app-control-kanban__column {
    .app-control-kanban__content {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .group__foldingbar__ghost {
      z-index: -1;
      margin: 0px;
      border: none;
      padding: 0px;
      height: 0px;
      width: 10px;
      overflow: hidden;
    }
    .group__foldingbar__content {
      width: 100%;
      height: 40px;
      border-left: 0;
      text-align: center;
    }
    .foldingbar__content__icon {
      float: left;
      padding: 6px 0px 0px 6px;
      font-size: 20px;
      &:hover {
        cursor: pointer;
      }
    }
    .foldingbar__content__title {
      font-size: 17px;
      padding-top: 8px;
    }
    .group__foldingarea {
      flex-shrink: 0;
      width: 100%;
      display: flex;
    }
    .group__foldingarea__header {
      width: 36px;
      position: relative;
      padding: 8px 0px;
    }
    .foldingarea__header__icon {
      font-size: 20px;
      padding: 0px 6px;
      position: absolute;
      &:hover {
        cursor: pointer;
      }
    }
    .foldingarea__header__title {
      writing-mode: tb;
      padding: 30px 6px 0px 6px;
    }
    .foldingarea__header__action {
      bottom: 0px;
      left: 0px;
      position: absolute;
    }
    .header__action__content__item {
      &:nth-child(n + 2) {
        margin-top: 4px;
      }
    }
    .group__foldingarea__content {
      display: flex;
      flex-grow: 1;
      height: 100%;
      overflow: auto;
    }
    .foldingarea__content__item {
      margin: 8px 0px 8px 8px;
      padding: 8px;
      overflow: hidden;
    }
    .foldingarea__content__empty {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.app-control-kanban {
  .group__foldingbar__content {
    color: @text-color;
    border: 1px solid mix(#fff, @text-color, 85%);
    background-color: mix(@primary-color, #fff, 20%);
    .foldingbar__content__icon {
      &:hover {
        color: @primary-color;
      }
    }
  }
  .group__foldingarea {
    border: 1px solid @border-color-base;
    .foldingarea__header__icon {
      &:hover {
        color: @primary-color;
      }
    }
    .foldingarea__content__item {
      border: 1px solid @border-color-base;
      &.is-active {
        color: @primary-color;
        border-color: @primary-color;
      }
    }
  }
  &.app-control-kanban__row {
    .app-control-kanban__content__group {
        .group__foldingarea__header {
          border-bottom: 1px solid @border-color-base;
        }
      &:last-child {
        .group__foldingbar__content {
          border: 1px solid @border-color-base;
        }
        .group__foldingarea {
          border: 1px solid @border-color-base;
        }
      }
    }
  }

  &.app-control-kanban__column {
    .app-control-kanban__content__group {
      .group__foldingbar__content {
        border-bottom: none;
      }
      .group__foldingarea {
        border-bottom: none;
        .group__foldingarea__header {
          border-right: 1px solid @border-color-base;
        }
      }
      &:last-child {
        .group__foldingbar__content {
          border: 1px solid @border-color-base;
        }
        .group__foldingarea {
          border: 1px solid @border-color-base;
        }
      }
    }
  }
}