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

.root {
  composes: default from './Spacing.css';
}

.previewContainer {
  display: block;
  cursor: move;
  position: relative;
  border-radius: var(--form-builder-block-border-radius);
  border: 1px solid var(--form-builder-block-border-color);
  box-shadow: var(--form-builder-block-shadow);
  min-height: 3.5rem;
  box-sizing: border-box;

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

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

  @nest &:hover {
    box-shadow: var(--form-builder-block-shadow--error-hover);
  }
}

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

.root.selected:not(.focused) > .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%)
    );
}

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

.header {
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 2.5rem;
  position: absolute;
  padding: var(--small-padding);
  border-radius: var(--border-radius-base);
  background-color: color(var(--component-bg) a(70%));
  top: var(--small-padding);
  right: var(--small-padding);
  font-size: var(--font-size-small);
}

.type {
  display: block;
  text-transform: uppercase;
  opacity: 1;
  padding-right: var(--small-padding);
}

.validationStatus {
  display: flex;
  align-items: center;
  padding-right: var(--small-padding);
}

.linkToReference {
  display: flex;
  align-items: center;
  transition: transform 0.1s linear, opacity 0.1s linear;
  margin-right: var(--small-padding);

  @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);
  }
}