@import '../../globals/vars';
@import '../../vendor/carbon-components/scss/globals/scss/layout';
@import './card-range-picker';
@import './card-toolbar';
@import './data-state-renderer';
@import '../../globals/mixins';

$iot-header-padding: $spacing-05;
$tooltipSize: $spacing-07;
$lineHeightSize: 1.375em;

.#{$iot-prefix}--card--wrapper {
  background: white;
  box-sizing: border-box;
  outline: solid $spacing-01 transparent;
  height: var(--card-default-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &__selected {
    outline: solid $spacing-01 $interactive-02;
    box-sizing: border-box;
  }
}

.#{$iot-prefix}--card--resizing {
  outline: $spacing-01 solid $interactive-02;
  box-sizing: border-box;
}

.#{$iot-prefix}--card.react-grid-item > .react-resizable-handle {
  // Make sure the resize handle is placed on top of absolute positioned card content
  z-index: 2;
}

.#{$iot-prefix}--card--title {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  // min-width value is required to ensure flex child with text properly truncates
  // https://css-tricks.com/flexbox-truncated-text/
  min-width: 0;
  margin-top: $spacing-03;
  padding-right: $spacing-05;
  width: 100%;

  html[dir='rtl'] & {
    padding-left: $spacing-05;
    padding-right: unset;
  }

  & + *:not(.#{$iot-prefix}--card--toolbar) {
    margin-left: $spacing-05;
  }
}

.#{$iot-prefix}--card--header--tooltip {
  flex-basis: $tooltipSize;
  margin-top: $spacing-02;
  .#{$prefix}--tooltip__trigger {
    margin-right: $spacing-03;
  }
}

.#{$iot-prefix}--card--title--text,
.#{$iot-prefix}--card--subtitle--text {
  @include multiline-text-overflow(1, $lineHeightSize);
  word-break: break-all;
  min-width: 3rem;
}

.#{$iot-prefix}--card--title--text--wrapped {
  -webkit-line-clamp: 2;
  max-height: calc(#{$lineHeightSize} * 2);
  word-break: normal;
}

.#{$iot-prefix}--card--title--text {
  @include type-style('productive-heading-02');
  color: $text-01;
  max-width: calc(100% - #{$tooltipSize});
}

.#{$iot-prefix}--card--subtitle--text {
  @include type-style('label-01');
  color: $text-02;
  font-weight: normal;
  width: 100%;
  max-height: 1.34em;
  max-width: calc(100% - #{$tooltipSize});

  &--padded {
    margin-right: $tooltipSize;
  }

  html[dir='rtl'] &--padded {
    margin-left: $tooltipSize;
    margin-right: unset;
  }
}

.#{$iot-prefix}--card--header {
  flex: 0 0 $spacing-09;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight: bold;
  padding: 0 0 0 $iot-header-padding;

  html[dir='rtl'] & {
    padding: 0 $iot-header-padding 0 0;
  }
}

.#{$iot-prefix}--card--content {
  flex: 1;
  padding: 0 $spacing-05 $spacing-05;
  position: relative;
  height: var(--card-content-height);
  overflow-x: visible;
  overflow-y: visible;

  .#{$prefix}--cc--chart-wrapper {
    background-color: inherit;
  }
}

.#{$iot-prefix}--card--content--expanded {
  overflow-y: auto;
}

.#{$iot-prefix}--card--skeleton-wrapper {
  padding: var(--card-content-padding);
  width: 80%;
}

.#{$iot-prefix}--card--footer--wrapper {
  align-items: center;
  border-top: 1px solid $ui-03;
  display: flex;
  height: 2.5rem;
  overflow: hidden;
  padding: 0 $spacing-05;
}

.#{$iot-prefix}--card--empty-message-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--card-content-padding);
  text-align: center;
  line-height: 1.3;
}

// Change background for charts in Cards
.#{$iot-prefix}--card .#{$prefix}--chart-holder {
  background-color: $ui-01;
}

// Needed to allow the overflow menu to overlay the expanded card correctly
.#{$prefix}--modal .#{$iot-prefix}--card--overflow {
  z-index: 10000;
}