@prefix: border-slice-img-editor;

.@{prefix} {
  &- {
    &root {
      width: 100%;
      height: 120px;
      border: 1px solid #DDDDDD;
      cursor: pointer;

      &:hover {
        .@{prefix}-tips {
          opacity: 1;
        }
      }
    }

    &eq-ratio-box {
      width: 100%;
      height: 100%;
    }

    &tips {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      opacity: 0;
      transition: opacity 300ms;
    }

    &container-row {
      display: flex;
      flex-direction: row;

      > * {
        flex: 1;
        width: 50%;
        flex-shrink: 0;
      }
    }

    &row {
      display: flex;
      align-items: start;
      flex-direction: row;
      gap: 4px;
    }

    &editor {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      background-color: #eeeeee;
    }

    &editor-content {
      position: absolute;
      top: 0;
      left: 0;
    }

    &viewport-sensor {
      width: 100%;
      height: 100%;
    }
  }
}