@import 'part:@lyra/base/theme/variables/forms-style';
@import 'part:@lyra/base/theme/variables-style';

.root {
  display: inline;
  position: relative;
  margin: 0 0.25em; /* Allow cursor to show in nearby text */
}

.previewContainer {
  position: relative;
  display: inline-block;
  cursor: move;
  box-sizing: border-box;
  border: 1px solid transparent;
  background-color: var(--form-builder-block-background);

  @nest &:hover {
    background-color: var(--form-builder-block-background-hover);
  }
}

.root.hasErrors > .previewContainer {
  background-color: var(--state-danger-color);
  border: 1px solid var(--form-builder-block-border-color-error);
}

.root.focused > .previewContainer {
  border: 1px solid var(--form-builder-block-border-color-focus);
  box-shadow: var(--form-builder-block-shadow--focus);
}

.root.selected > .previewContainer {
  background-color: var(--form-builder-block-background-selected);
}

.root.focused.selected > .previewContainer {
  border: 1px solid var(--form-builder-block-border-color-focus);
}

.root.selected.hasErrors > .previewContainer {
  box-shadow: none;
  border: 1px solid
    color(
      var(--state-danger-color)
        blend(var(--form-builder-block-background-selected) 70%)
    );
  background-color: color(
    var(--state-danger-color)
      blend(var(--form-builder-block-background-selected) 70%)
  );
}

.root.focused.hasErrors > .previewContainer {
  box-shadow: var(--input-box-shadow--error-focus);
  border: 1px solid var(--state-danger-color);
  background-color: color(var(--state-danger-color) a(80%));
}

.functions {
  display: inline-flex;
  align-items: center;
  flex-grow: 0;
  font-size: var(--font-size-small);
  color: var(--text-color-secondary);
  margin-left: var(--small-padding);

  @nest & > * {
    margin-right: var(--small-padding);
  }
}

.linkToReference {
  z-index: 2;
  transition: transform 0.1s linear, opacity 0.1s linear;
  transform: scale(1.2);

  @nest &:hover {
    opacity: 1;
    color: var(--link-color);

    @nest & svg {
      color: var(--link-color);
    }
  }

  @nest &:active {
    opacity: 1;
    color: var(--text-color);

    @nest & svg {
      color: var(--text-color);
    }
  }

  @nest & svg {
    color: var(--text-color);
  }
}