.ng-spinning-column,
.ng-spinning-column > .ant-spin-container {
  height: 100%;
}

.ng-spinning-row,
.ng-spinning-row > .ant-spin-container {
  width: 100%;
}

.layout-flex-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 100%;

  > * {
    flex-shrink: 0;
  }

  .flex-content {
    flex: 1;
  }
}

.layout-flex-column {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;

  > * {
    flex-shrink: 0;
  }

  .flex-content {
    flex: 1;
  }
}

.ng-layout {
  .ng-slider {
    transition: all 0.3s;
    position: relative;

    > div {
      overflow: hidden;
      height: 100%;
      width: 100%;
    }

    > span.icon-bar {
      position: absolute;

      > * {
        cursor: pointer;
        position: absolute;
        align-items: center;
        justify-content: center;
        display: flex;

        &.translate-icon {
          transition: all 0.3s;
          opacity: 0.3;

          > span {
            transition: all 0.3s;
          }

          &:hover {
            transform: scale(1.3);
            opacity: 1;
          }
        }
      }

      &.slider-top,
      &.slider-bottom {
        left: 0;
        width: 100%;

        > .translate-icon:hover {
          transform-origin: 50% 0;
        }
      }

      &.slider-bottom > .translate-icon:hover {
        transform-origin: 50% 100%;
      }

      &.slider-left,
      &.slider-right {
        top: 0;
        height: 100%;

        > .translate-icon:hover {
          transform-origin: 0 50%;
        }
      }

      &.slider-right > .translate-icon:hover {
        transform-origin: 100% 50%;
      }

      &.slider-top {
        bottom: 0;
      }

      &.slider-bottom {
        top: 0;
      }

      &.slider-left {
        right: 0;
      }

      &.slider-right {
        left: 0;
      }
    }

    > span.slider-bar {
      position: absolute;
      display: block;
      transition: background-color 0.2s;
      border-radius: 3px;
      background-color: transparent;

      &:hover,
      &.slider-hidden,
      &.slider-dragging {
        background-color: var(--ant-primary-5);
        user-select: none;
      }

      &.slider-active {
        border: 1px dashed var(--ant-primary-5);
        background-color: transparent;
        user-select: none;
      }

      &.slider-top,
      &.slider-bottom {
        left: 0;
        height: 4px;
        width: 100%;

        &:hover {
          cursor: row-resize;
        }
      }

      &.slider-left,
      &.slider-right {
        top: 0;
        width: 4px;
        height: 100%;

        &:hover {
          cursor: col-resize;
        }
      }

      &.disabled:hover {
        cursor: default;
        background-color: transparent;
      }

      &.slider-top {
        bottom: -4px;
      }

      &.slider-bottom {
        top: -4px;
      }

      &.slider-left {
        right: -4px;
      }

      &.slider-right {
        left: -4px;
      }
    }
  }
}