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

.#{$iot-prefix}--value-card__value-renderer {
  &--wrapper {
    text-overflow: ellipsis;
    display: flex;

    .#{$iot-prefix}--value-card__attribute-wrapper--horizontal & {
      width: auto;
      max-width: 100%;
    }

    .#{$iot-prefix}--value-card__content-wrapper--vertical & {
      overflow: hidden;
    }
  }

  &--value {
    @include type-style('productive-heading-06');
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--value-renderer-font-size);
    color: var(--value-renderer-color);
    $line-height: calc(var(--value-renderer-font-size) * 1.2);
    $max-lines: var(--value-renderer-max-lines);
    line-height: $line-height;
    @include multiline-text-overflow($max-lines, $line-height);
    word-break: break-all;
    /* override default button styles to match span visuals when using a button */
    &.#{$prefix}--btn {
      padding: $spacing-01;
      flex: 1;
      white-space: nowrap;
    }

    &--vertical {
      text-align: left;
    }
  }

  &--boolean {
    text-transform: capitalize;
  }
}

html[dir='rtl'] .#{$iot-prefix}--value-card__value-renderer--value.#{$iot-prefix}--btn {
  padding: $spacing-01;
}