@import "../../styles/variables.scss";

:host {
  display: flex;
  flex-direction: row;
  max-width: 500px;
  justify-content: space-between;
  align-items: flex-start;
  width: max-content;
  padding: 8px;
  @include entity-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
    i.#{$name} {
      color: $color;
    }
  }
  &.horizontal {
    width: 100%;
    max-width: 100%;
    .value-outer {
      display: grid;
      width: 100%;
      grid-template-columns: minmax(120px, 30%) 1fr;
    }
  }

  .value-outer {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .actions {
    i {
      cursor: default;
      color: #9e9e9e;
      margin-left: 15px;
      margin-top: 7px;
      &.clickable {
        cursor: pointer;
        color: $ocean;
      }
    }
    &.clickable {
      cursor: pointer;
      color: $ocean;
    }
  }
  ::ng-deep novo-entity-list {
    display: block;
    @include entity-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
      i.#{$name} {
        color: $color;
      }
    }
    .entity {
      padding-top: 6px;
      padding-bottom: 6px;
    }
    i {
      margin-right: 6px;
    }
  }
}