$smallControl: $euiSize * 14;
$mediumControl: $euiSize * 25;
$largeControl: $euiSize * 50;
$controlMinWidth: $euiSize * 14;

.controlGroup {
  min-height: $euiSize * 4;
}

.controlsWrapper--twoLine {
  .groupEditActions {
    padding-top: $euiSize;
  }
}

.controlFrameCloneWrapper {
  width: max-content;

  &--small {
    width: $smallControl;
    min-width:$smallControl;
  }

  &--medium {
    width: $mediumControl;
    min-width:$mediumControl;
  }

  &--large {
    width: $largeControl;
    min-width:$largeControl;
  }

  &--twoLine {
    margin-top: -$euiSize * 1.25;
  }

  &__label {
    cursor: grabbing !important; // prevents cursor flickering while dragging the clone
  }

  .controlFrame__draggable {
    cursor: grabbing;
    height: $euiButtonHeight;
    align-items: center;
    border-radius: $euiBorderRadius;
    font-weight: $euiFontWeightSemiBold;
    @include euiFormControlDefaultShadow;
    background-color: $euiFormInputGroupLabelBackground;
    min-width: $controlMinWidth;
    @include euiFontSizeXS;
  }

  .controlFrame__formControlLayout,
  .controlFrame__draggable {
    .controlFrame__dragHandle {
      cursor: grabbing;
    }
  }

  @include euiBreakpoint('xs', 's', 'm') {
    width: 100%;
    &--small {
      min-width:unset;
    }

    &--medium {
      min-width:unset;
    }

    &--large {
      min-width:unset;
    }
  }
}

.controlFrame__labelToolTip {
  max-width: 40%;
}

.controlFrameWrapper {
  flex-basis: auto;
  position: relative;

  &.controlFrameWrapper-isEditable {
    .controlFrame__formControlLayoutLabel {
      padding-left: 0;
    }
  }

  &:not(.controlFrameWrapper-isEditable) {
    .controlFrameFormControlLayout--twoLine .euiFormControlLayout__childrenWrapper {
      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
    }
  }

  .controlFrame__formControlLayout {
    width: 100%;
    min-width: $controlMinWidth;
    transition: background-color .1s, color .1s;

    &Label {
      @include euiTextTruncate;
      border-radius: $euiBorderRadius;
    }

    &:not(.controlFrame__formControlLayout-clone) {
      .controlFrame__dragHandle {
        cursor: grab;
      }
    }

    .controlFrame__control {
      height: 100%;
      transition: opacity .1s;

      &.controlFrame--twoLine {
        width: 100%;
      }
    }

    .controlFrame--controlLoading {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &--small {
    width: $smallControl;
    min-width: $smallControl;
  }

  &--medium {
    width: $mediumControl;
    min-width: $mediumControl;
  }

  &--large {
    width: $largeControl;
    min-width: $largeControl;
  }

  @include euiBreakpoint('xs', 's', 'm') {
    &--small {
      min-width:unset;
    }

    &--medium {
      min-width:unset;
    }

    &--large {
      min-width:unset;
    }
  }

  &--insertBefore,
  &--insertAfter {
    .controlFrame__formControlLayout:after {
      content: '';
      position: absolute;
      background-color: transparentize($euiColorPrimary, .5);
      border-radius: $euiBorderRadius;
      top: 0;
      bottom: 0;
      width: $euiSizeXS * .5;
    }
  }

  &--insertBefore {
    .controlFrame__formControlLayout:after {
      left: -$euiSizeXS - 1;
    }
  }

  &--insertAfter {
    .controlFrame__formControlLayout:after {
      right: -$euiSizeXS - 1;
    }
  }

  &-isDragging {
    .euiFormRow__labelWrapper {
      opacity: 0;
    }
    .controlFrame__formControlLayout {
      opacity: 0; // hide dragged control, while control is dragged its replaced with ControlClone component
    }
  }
}

.controlFrameFloatingActions {
  z-index: 1;
  position: absolute;

  &--oneLine {
    padding: $euiSizeXS;
    border-radius: $euiBorderRadius;
    background-color: $euiColorEmptyShade;
    box-shadow: 0 0 0 1px $euiColorLightShade;
  }

  &--twoLine {
    top: (-$euiSizeXS) !important;
  }
}