@import '../../styles/vars.scss';

.op-layout {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  font-size: 20px;
  .operate-layout-split-item {
    flex: 1 1 0;
    overflow: auto;
  }
  .operate-layout-interval-item {
    flex: 0 0 auto;
    overflow: visible;
  }
}

.operate-components-layout-item {
  display: flex;
  flex-direction: column;
  flex: 0 0;
  overflow: visible;
  &.auto {
    flex: 1 1 0;
    overflow: auto;
  }
  &.ver {
    flex-direction: column;
    &.middle {
      justify-content: center;
    }
    &.top {
      justify-content: flex-start;
    }
    &.bottom {
      justify-content: flex-end;
    }
    &.center {
      align-items: center;
    }
    &.left {
      align-items: flex-start;
    }
    &.right {
      align-items: flex-end;
    }
  }
  &.hoz {
    flex-direction: row;
    &.middle {
      align-items: center;
    }
    &.top {
      align-items: flex-start;
    }
    &.bottom {
      align-items: flex-end;
    }
    &.center {
      justify-content: center;
    }
    &.left {
      justify-content: flex-start;
    }
    &.right {
      justify-content: flex-end;
    }
  }
  &.white {
    padding: 0 $op-interval;
    background-color: white;
  }
  &.radius {
    border-radius: $op-interval;
  }
  &.radius-top {
    border-top-left-radius: $op-interval;
    border-top-right-radius: $op-interval;
  }
  &.radius-bottom {
    border-bottom-left-radius: $op-interval;
    border-bottom-right-radius: $op-interval;
  }
}