@import '~@/components/styles/widget.scss';

.attribute {
  @include widget;

  border: 1px solid transparent;

  &.is-computed {
    background-color: #ccf8f8;
    border-color: #b5f5f5;
    color: #666;
    font-weight: bold;

    > .value.editing {
      border-radius: 5px;
      left: 2px;
      overflow: hidden;
      position: absolute;
      right: 2px;
    }
  }

  &.as-numeric, &:hover {
    > .value.rating { display: none; }
  }
  &.as-rating:not(:hover) {
    > .value.numeric, > .modifier { display: none; }

    .value.rating, .value.rating > span {
      display: flex;
      flex: 2;
      height: 100%;
      justify-content: flex-end;
      max-width: 100%;
      width: 100%;

      > .rating {
        justify-content: flex-start;
        max-width: 100%;
        min-width: 100%;

        > span {
          height: 10px;
          width: 10px;

          > .dot {
            height: 8px;
            width: 8px;
          }

          &:nth-child(5n+1) { margin-left: 3px; }
        }
      }
    }
    > .modifier.positive:before { content: '+'; }
  }

  .modifier {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: center;
    min-width: 40px;
    text-align: center;

    &.positive { color: green; }
    &.negative { color: red; }
    &.zero { color: gray; }
  }
}