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

.root {
  user-select: none;
  position: relative;
  margin-bottom: var(--small-padding);
}

.previewContainer {
  display: block;
  cursor: move;
  border: 1px solid var(--form-builder-block-border-color);
  border-radius: var(--border-radius-small);
  background-color: var(--body-bg);
  box-shadow: var(--input-box-shadow);
  overflow: hidden;
  align-items: start;

  @nest &:hover {
    box-shadow: var(--input-box-shadow--hover);
  }

  @nest &:focus {
    box-shadow: var(--input-box-shadow--focus);
  }
}

.functions {
  display: flex;
  position: absolute;
  top: var(--small-padding);
  right: var(--small-padding);
  z-index: 1;
  color: var(--gray-darker);
  background-color: color(var(--component-bg) a(70%));
  border-radius: var(--border-radius-base);
}

.type {
  display: block;
  text-transform: uppercase;
  font-size: var(--font-size-xsmall);
  margin-top: calc(var(--medium-padding) * 0.75);
  opacity: 1;
  padding-right: var(--small-padding);
  line-height: 1.25rem;
  margin-left: 1rem;
}

.dragHandle {
  padding: var(--medium-padding);
  opacity: 0.5;
}

.preview {
  flex-grow: 1;
  min-height: 3.5rem;
}

.inputContainer {
  position: absolute;
  top: calc(50% + 0.5em);
  left: 3rem;
}

.focused {
  composes: root;
}

.focused > .previewContainer {
  box-shadow: var(--input-box-shadow--focus);
}

.selected {
  composes: root;
}

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

.editBlockContainerPopOver {
  position: absolute;
  top: 50%;
  left: 25%;
}

.editBlockContainerFold {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
}