.udp-spinning-column,
.udp-spinning-row,
.udp-spinning-column>.ant-spin-container,
.udp-spinning-row>.ant-spin-container {
  height: 100%;
  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;
  }
}

.udp-layout {
  .udp-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(--primary-color);
        user-select: none;
      }

      &.slider-active {
        border: 1px dashed var(--primary-color);
        background-color: transparent;
        opacity: 1 !important;
        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;
      }

      &.slider-icon {
        background-color: transparent;

        &.icon-hover:not(.slider-dragging) {
          transition: opacity .3s;
          opacity: 0;

          &:hover {
            opacity: 1;
          }
        }

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

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

        >.translate-icon {
          cursor: inherit;
          position: absolute;
          align-items: center;
          justify-content: center;
          display: flex;
          opacity: .35;
          transition: opacity .3s;

          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
}