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

.root {
  position: relative;
}

.inner {
  display: flex;
  justify-content: space-between;
}

.innerWithError {
  composes: inner;
}

.listItem {
  composes: root;
}

.gridItem {
  composes: root;
}

.editRoot {
  /*
    This is where the popover sticks to
  */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
}

.editRootFold {
  position: relative;
  width: calc(100% + var(--medium-padding) * 2);
  margin-left: calc(var(--medium-padding) * -1);
}

.dragHandle {
  composes: default from 'part:@lyra/components/drag-handle-style';
}

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

.previewWrapper {
  flex-grow: 1;
  outline: none;
  user-select: none;
  min-width: 0;

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

.popupAnchor {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.previewWrapperHelper {
  outline: none;
}

.previewWrapperHelper:focus {
  @nest .innerWithError & {
    box-shadow: var(--input-box-shadow--error-focus);
  }
}

.functions {
  display: 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);
  }
}

.functionsInGrid {
  composes: functions;
  background-color: color(var(--component-bg) a(70%));
  position: absolute;
  top: var(--small-padding);
  right: var(--small-padding);
  font-size: var(--font-size-tiny);
  border-radius: var(--border-radius-base);
  z-index: 1;
  color: var(--text-color);

  @nest & > * {
    margin: 0;
  }
}

.defaultDialogContent {
  padding: var(--medium-padding);
  box-sizing: border-box;
}

.validationIconError {
  composes: validationIconError from 'part:@lyra/base/theme/forms/validation-style';
}