@import '../../vendor/carbon-components/scss/components/combo-box/combo-box';
@import '../../globals/vars';
@import '../../globals/mixins';

.#{$iot-prefix}--combobox {
  display: flex;
  flex-flow: column-reverse;
  position: relative;
  padding-top: $spacing-08;

  &-tags {
    margin-bottom: $spacing-03;

    li {
      display: inline-block;
      max-width: 100%;
    }
  }

  &.#{$iot-prefix}--combobox__menu--fit-content {
    @include list-box-menu-fits-content();
  }

  // Default for when fit-content is active and the menu is wider than the input
  // is that the menu expands to the right. This style makes it expand to the left
  // unless we are in RTL mode.
  &.#{$iot-prefix}--combobox__menu--flip-horizontal {
    @include list-box-menu-flip-horizontal();
  }

  // Placement of the editOptionText
  &.#{$iot-prefix}--combobox-add {
    $ai-apps-combobox-input-height-sm: $spacing-07;
    $ai-apps-combobox-input-height: $spacing-08;
    $ai-apps-combobox-input-height-xl: $spacing-09;
    $ai-apps-combobox-helper-text-height: calc(#{$spacing-05} + #{$spacing-02});
    $ai-apps-combobox-input-negative-height: calc(#{$ai-apps-combobox-input-height} * -1);
    $ai-apps-combobox-input-negative-height-sm: calc(#{$ai-apps-combobox-input-height-sm} * -1);
    $ai-apps-combobox-input-negative-height-xl: calc(#{$ai-apps-combobox-input-height-xl} * -1);

    &::after {
      content: attr(data-edit-option-text);
      color: $text-03;
      position: absolute;
      right: $spacing-03;
      z-index: z('overlay') + 1;
      // half the height of the input/first list item
      bottom: calc(#{$ai-apps-combobox-input-negative-height} / 2);
      // offset bottom calculation by half the height of the text (so it's vertically centered)
      transform: translateY(50%);
    }
    // when helperText is present, it's height must be accounted for
    &.#{$iot-prefix}--combobox-helper-text::after {
      bottom: calc(
        (#{$ai-apps-combobox-input-negative-height} / 2) + #{$ai-apps-combobox-helper-text-height}
      );
    }

    // sm field size variant
    &.#{$iot-prefix}--combobox-size-sm::after {
      bottom: calc(#{$ai-apps-combobox-input-negative-height-sm} / 2);
    }
    &.#{$iot-prefix}--combobox-size-sm.#{$iot-prefix}--combobox-helper-text::after {
      bottom: calc(
        (#{$ai-apps-combobox-input-negative-height-sm} / 2) + #{$ai-apps-combobox-helper-text-height}
      );
    }

    // xl field size variant
    &.#{$iot-prefix}--combobox-size-xl::after {
      bottom: calc(#{$ai-apps-combobox-input-negative-height-xl} / 2);
    }
    &.#{$iot-prefix}--combobox-size-xl.#{$iot-prefix}--combobox-helper-text::after {
      bottom: calc(
        (#{$ai-apps-combobox-input-negative-height-xl} / 2) + #{$ai-apps-combobox-helper-text-height}
      );
    }
  }
}