@use "../base/colors" as color;
@use "../base/variables" as var;

@use "group-actions";
@use "row";
@use "row-edit";
@use "column";
@use "field";
@use "field-edit";
@use "../base/mixins";

.highlight-component {
  box-shadow: 0 0 mixins.space() 2px color.$brand-info;
}

.formeo-stage {
  width: 73%;
  box-sizing: border-box;
  transition: width 250ms;
  margin-right: mixins.space();
  flex: 1 1 auto;
  position: relative;
  transition-property: background-color, border-color;
  transition-duration: 500ms, 333ms;
  border: 0 dashed transparent;
  background-color: color.$stage-background;
  padding-left: var.$action-btn-width - 1;
  padding-bottom: mixins.space(1);
  overflow: visible;

  > .children {
    @include mixins.display-column;
    gap: var.$component-gap;
  }

  &.empty {
    border: 3px dashed color.$gray-lighter;
    background-color: color.$shadow;
  }

  &.removing-all-fields {
    .formeo-row {
      transition: margin-top 250ms ease-in;
    }
  }

  & > .formeo-field {
    background-color: color.$white;
  }

  @include mixins.no-list-style;

  @include mixins.breakpoint("phone-lrg") {
    width: calc(100% - 50px);
  }
}

.editing-stage {
  .formeo-settings {
    display: block;
  }

  .formeo-stage {
    display: none;
  }
}

.f-field-group {
  margin-bottom: 0;
}

[class$="empty"] {
  &[class*="editing-"] {
    &::after {
      opacity: 0;
    }
  }

  &::after {
    opacity: 1;
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    color: color.$gray-light;
    transition: opacity 200ms ease-in-out;
    will-change: opacity;
    text-align: center;
    transform: translate(-50%, -50%);
    content: attr(data-hover-tag);
  }
}

.formeo-settings {
  display: none;
}
