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

.#{$iot-prefix}--list-item-parent {
  position: relative;
}

.#{$iot-prefix}--list-item-editable {
  &--drag-container {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    justify-content: space-between;
    background: $ui-01;

    &:hover {
      cursor: grab;
    }

    &:active {
      background: $hover-ui;

      cursor: grabbing;
    }
  }

  &--drop-targets {
    width: 100%;
    height: rem(40px);
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: stretch;
  }

  &--drop-target-above {
    position: relative;
    width: 100%;
    bottom: 0;

    &__over {
      border-top: solid 2px $focus;
    }
  }

  &--drop-target-nested {
    position: absolute;
    width: 100%;

    top: 0;
    bottom: 0;

    &__over {
      border: solid 2px $focus;
    }
  }

  &--drop-target-below {
    position: absolute;

    width: 100%;
    bottom: 0;

    &__over {
      border-bottom: solid 2px $focus;
    }
  }

  &--drag-preview {
    position: absolute;
    background: $inverse-02;
    color: $text-04;
    padding: $spacing-02 $spacing-04;
    border-radius: 0.125rem;
    opacity: 1;

    z-index: -100;
  }

  &--dragging {
    background: $hover-ui;
    cursor: grabbing;
  }

  &:hover {
    background: $hover-ui;
    cursor: grab;
  }
}

.#{$iot-prefix}--list-item {
  border-bottom: 1px solid $ui-03;
  display: flex;
  height: rem(40px);
  color: $text-02;
  padding: $spacing-03 $spacing-05;
  align-items: center;
  overflow: hidden;

  &:focus {
    outline: 2px solid $focus;
    outline-offset: -$spacing-01;
  }

  &--handle {
    flex-shrink: 0;
    fill: $inverse-02;
    margin-right: $spacing-04;

    &__disabled {
      fill: $disabled-02;
      cursor: not-allowed;
    }
  }

  &__large {
    height: rem(96px);
    padding: $spacing-05;
    align-items: start;
  }

  &--category {
    @include type-style('productive-heading-01');
    color: $text-01;
  }

  &__selectable {
    cursor: pointer;
    &:hover {
      background: $hover-row;
      color: $text-01;
    }
  }

  &__selected {
    border-left: solid $spacing-02 $interactive-01;
    padding-left: $spacing-04; // account for the border
    color: $text-01;
    background: $selected-ui;
  }

  &--expand-icon {
    cursor: pointer;
    padding: $spacing-01;
    margin-right: $spacing-04 - $spacing-01; // account for padding

    &:focus {
      outline: 2px solid $focus;
    }

    &__disabled {
      fill: $disabled-02;
      color: $disabled-02;
      cursor: not-allowed;
    }
  }

  &--content {
    @include type-style('body-short-01');
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    &__large {
      align-items: flex-start;
    }
    &--icon {
      padding-top: $spacing-01;
      &__left {
        padding-right: $spacing-04;
      }
      &__right {
        padding-left: $spacing-04;
        order: 9;
      }
    }
    &--values {
      position: relative;
      flex: 1;
      max-width: 100%;
      &--main {
        flex: 1;
        display: flex;
        max-width: 100%;
        align-items: center;
        &__large {
          @include type-style('productive-heading-01');
          color: $text-01;
          padding-bottom: $spacing-03;
        }
      }
      &--value {
        flex: 1;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: $spacing-09;
        &__with-actions {
          padding-right: $spacing-07; // save room for the action button
          width: $spacing-05;
        }
        &__large {
          color: $text-05;
          white-space: wrap;
          height: rem(36px);
          overflow: hidden;
        }
      }
      &__disabled {
        color: $disabled-02;
      }
    }
    &--row-actions {
      flex: 0;
      margin-right: 0;
      overflow: none;
      display: flex;
      position: absolute;
      right: -$spacing-03;
    }
  }
  &--nesting-offset {
    flex-grow: 0;
    flex-shrink: 0;
  }
}