@import '../theme/default.pcss';

.zent-design-preview-controller {
  position: relative;
  box-sizing: border-box;
  border: 0;

  &__actions {
    display: none;
    cursor: pointer;
    background-color: $theme-mask-2;
    z-index: 10;
    font-size: 12px;
  }

  &__action-btn {
    padding: 2px 6px;
    outline: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: $theme-stroke-10;
    border-left: 1px solid $theme-stroke-10;
    border-radius: 0;

    &:first-child {
      border-left: 0;
    }

    &:hover {
      color: $theme-stroke-8;
    }
  }

  &:hover &__actions,
  &--selected &__actions {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  &--dragable {
    cursor: move;
  }

  .zent-pop-wrapper {
    border-left: 1px solid $theme-stroke-10;
  }
}

.zent-design-preview-controller--highlight.zent-design-preview-controller {
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    pointer-events: none;
    display: none;
  }

  &:hover,
  &--selected {
    &:before {
      z-index: 2;
      display: block;
      border: 2px dashed $theme-error-2;
    }
  }
}