@import "../../style/mixins";
@import "../../style/themes/default";
@dockPrefixCls: pm-dock;
@preContainer: pm-container;
@preDockbar: pm-dockbar;

.@{dockPrefixCls} {
  width: 100%;
  height: 100%;

  &-sub {
    width: 100%;
    height: 100%;
  }

  .@{preContainer} {
    display: flex;
    align-items: center;
    align-content: center;
    flex: 1 1;
    background-color: transparent;
    overflow: hidden;

    &-last {
      width: 100%;
      height: 100%;
    }

    &-top {
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    &-left {
      flex-direction: row;
      width: 100%;
      height: 100%;
    }

    &-right {
      flex-direction: row-reverse;
      width: 100%;
      height: 100%;
    }

    &-bottom {
      flex-direction: column-reverse;
      width: 100%;
      height: 100%;
    }
  }

  .@{preDockbar} {
    display: flex;
    align-items: center;
    align-content: center;
    background-color: transparent;
    // border: 2px dotted darkred;

    &-top {
      flex-direction: row;
      width: 100%;
    }

    &-left {
      flex-direction: column;
      height: 100%;
    }

    &-right {
      flex-direction: column;
      height: 100%;
    }

    &-bottom {
      flex-direction: row;
      width: 100%;
    }

    &-filler {
      flex: 1 1;
    }

    &-h-divider {
      width: 80%;
      border-radius: 2px;
      border: 2px solid rgba(100, 100, 100, 0.5);
      margin: 4px;
    }

    &-v-divider {
      height: 80%;
      border-radius: 2px;
      border: 2px solid rgba(100, 100, 100, 0.5);
      margin: 4px;
    }
  }

}