@import '../global.scss';

$editable-prefix-cls: '#{$css-prefix}formily-editable';
$editable-popover-prefix-cls: '#{$css-prefix}formily-editable-popover';

.#{$editable-prefix-cls} {
  cursor: pointer;
  display: inline-flex;
  align-items: center;

  .#{$css-prefix}form-text {
    .#{$css-prefix}tag {
      transition: none !important;
    }

    .#{$css-prefix}tag:last-child {
      margin-right: 0 !important;
    }
  }

  &-content {
    display: flex;
    align-items: center;

    > * {
      margin-right: 3px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .#{$editable-prefix-cls}-edit-btn,
  .#{$editable-prefix-cls}-close-btn {
    transition: all 0.25s ease-in-out;
    color: #aaa;
    font-size: 12px;

    &:hover {
      color: $color-text1-1;
    }
  }

  .#{$css-prefix}form-text {
    display: flex;
    align-items: center;
  }

  .#{$editable-prefix-cls}-preview {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    max-width: 100px;
    display: block;
  }
}

.#{$editable-prefix-cls} {
  &-trigger {
    cursor: pointer;
    display: inline-flex !important;
    outline: none;
  }

  &-edit-btn {
    color: #aaa;
  }
}