// Part of the css and the colors used come from old StyledComponents code
// and should be replaced with actual carbon colors and design. See issue 1806

@import '../../globals/vars';
@import '../../globals/theme';

$selected-border-width: $spacing-01;
$selected-border: solid $selected-border-width $interactive-04;

// The custom properties --x-pos, --y-pos, --width, --height are set
// on the container by the react js code. They do not include units.
.#{$iot-prefix}--hotspot-container {
  position: absolute;
  font-family: Sans-Serif;
  pointer-events: auto;
  top: calc((var(--y-pos) * 1%) - ((var(--height) / 2) * 1px));
  left: calc((var(--x-pos) * 1%) - ((var(--width) / 2) * 1px));
}

// FIXED OR DYNAMIC HOTSPOT (USING TOOLTIP)
.#{$iot-prefix}--hotspot-container--is-fixed,
.#{$iot-prefix}--hotspot-container--is-dynamic {
  &.#{$iot-prefix}--hotspot-container--selected {
    $padding: $spacing-02;

    box-sizing: border-box;
    border: $selected-border;
    padding: #{$padding};
    top: calc(
      (var(--y-pos) * 1%) - (((var(--height) * 1px) / 2) + #{$padding} + #{$selected-border-width})
    );
    left: calc(
      (var(--x-pos) * 1%) - (((var(--width) * 1px) / 2) + #{$padding} + #{$selected-border-width})
    );
  }
  &.#{$iot-prefix}--hotspot-container--has-icon {
    .bx--tooltip__label {
      border: solid 1px $gray-40;
      cursor: pointer;
      padding: $spacing-02;
      background: $white-0;
      opacity: 0.9;
      border-radius: 4px;
      @include box-shadow();
    }
  }

  .bx--tooltip__label {
    display: flex;
    cursor: pointer;
    border-radius: 13px;
    background: none;
    @include box-shadow();
  }
}

.#{$iot-prefix}--hotspot-container--is-dynamic.#{$iot-prefix}--hotspot-container--selected {
  border-style: dashed;
}

// TEXT HOTSPOT
// The custom properties --bold, --italic, --background-color etc are set
// on the container by the react js code
.#{$iot-prefix}--hotspot-container--is-text {
  &.#{$iot-prefix}--hotspot-container--selected {
    box-sizing: border-box;
    border: $selected-border;
    top: calc((var(--y-pos) * 1%) - (((var(--height) * 1px) / 2)));
    left: calc((var(--x-pos) * 1%) - (((var(--width) * 1px) / 2)));
  }
}

.#{$iot-prefix}--text-hotspot {
  $padding: $spacing-03;
  $min-width: $layout-06;
  $text-input-height: $spacing-08;

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: $padding;
  box-sizing: border-box;
  min-width: $min-width;
  min-height: calc(#{$text-input-height});
  border-style: solid;
  background-color: var(--background-color);
  border-color: var(--border-color);
  border-width: calc(var(--border-width) * 1px);

  .#{$iot-prefix}--hotspot-content {
    & > *:nth-child(2) {
      &.#{$iot-prefix}--hotspot-content-attribute {
        margin-top: $spacing-03;
      }
    }

    h4 {
      @include type-style('productive-heading-01');
      text-align: left;
      padding-bottom: 0;
      line-height: calc(var(--title-font-size) * 1.4px);
      font-weight: var(--title-font-weight);
      font-style: var(--title-font-style);
      text-decoration-line: var(--title-text-decoration-line);
      color: var(--title-font-color);
      // Linting expects size to be in rem, but user size is given in px.
      // font-size: calc(
      //   ((var(--title-font-size) * 1px) / 16px) * 1rem
      // );

      // stylelint-disable-next-line declaration-property-unit-blacklist
      font-size: calc(var(--title-font-size) * 1px);

      // Used to expand the hotspot while the user types into the TextInput
      &.#{$iot-prefix}--hotspot-content-title__visually-hidden {
        visibility: hidden;
        height: 0px;
      }
    }
  }

  .#{$iot-prefix}--hotspot-content-label-section {
    text-align: left;
  }
  .#{$iot-prefix}--hotspot-content-label,
  .#{$iot-prefix}--hotspot-content-threshold {
    @include type-style('helper-text-01');
    font-weight: normal;
  }

  .#{$iot-prefix}--hotspot-content-title-wrapper--editable {
    $negative-margin-to-overide-parent-padding: calc(-1 * (#{$padding}));
    margin: $negative-margin-to-overide-parent-padding;

    .#{$iot-prefix}--hotspot-content-title-input {
      padding: 0 calc(#{$padding} + #{$selected-border-width});
      width: calc(
        (var(--width) * 1px) - (#{$selected-border-width} * 2) - (var(--border-width) * 1px * 2)
      );
      height: $text-input-height;
      border-bottom: none;
      &:focus {
        outline: none;
      }
    }
  }
}