@import 'base';

%field__selection-values_visible {
  visibility: visible;
}

%value {
  @extend %pill;
  margin: 1px;
  color: white;
}

.field {
  position: relative;
  display: inline-block;

  &__title {
    font-size: 14px;
    color: color(black, light);
    padding-left: 8px;

    &.field__title_empty {
      color: color(black, bright);
      font-style: italic;
    }
  }

  .field__label {
    @extend %value;
    background-color: color(black, pale);
    color: color(black, light);

    &.field__label_ellipsis {
      @extend %ellipsis;
    }

    &.field__label_filled {
      background-color: color(primary, light);
      color: color(white);
    }
  }

  &.field_category_non-exclusive {
    &.field_edit-mode_click {
      font-size: 12px;

      &.field_selected-values_empty {
        opacity: 0;

        &:hover {
          opacity: 1;

          .field__display {
            &.field__display_magnify {
              box-shadow: 0 0 0 0 transparent;
            }
          }
        }
      }

      &.field_active {
        opacity: 1;

        .field__selection-values {
          @extend %field__selection-values_visible;
        }
      }
    }

    &.field_edit-mode_hover {
      &.field_editable {
        &:hover {
          .field__selection-values {
            @extend %field__selection-values_visible;
          }
        }
      }
    }

    &.field_editable {
      &.field_active {
        .field__display {
          &.field__display_magnify {
            z-index: 2;
          }
        }
      }
    }

    .field__display {
      margin: 5px;
      border-radius: 5px;
      padding: 2px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      @extend %simple-input;
      position: relative;
      background-color: color(primary, pale);
      color: white;

      &.field__display_empty {
        background-color: color(black, pale);
      }

      &.field__display_magnify {
        z-index: 1;
        box-shadow: 0 0 5px 2px color(black, bright);
      }
    }

    .field__selection-values {
      visibility: hidden;
      position: absolute;
      z-index: 1;
      margin: -5px 5px 5px 5px;
      max-height: 300px;
      min-width: 140px;
      background-color: white;
      border-radius: 5px;
      border-style: solid;
      border-width: 1px;
      display: flex;
      flex-direction: column;
    }

    .field__selection-values-container {
      overflow: scroll;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .field__selection-value {
      @extend %link;
      padding: 10px;
      @extend %ellipsis;
      min-width: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: color(black, pale);
      flex-shrink: 0;

      &.field__selection-value_selected {
        background-color: color(primary, light);
        color: color(white);
      }
    }

    .field__selected-value {
      @extend %value;
      background-color: color(primary, light);

      &.field__selected-value_ellipsis {
        @extend %ellipsis;
      }
    }

    .field__search-bar {
      flex-shrink: 0;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      margin: 3px;
    }
  }

  &.field_category_comment {
    color: color('black');

    .field__label_comment {
      position: relative;
      white-space: normal;
      word-break: break-all;
      color: black;
      background-color: white;
      overflow: hidden;
      max-height: 40px;
      max-width: 300px;
      border-radius: 5px;

      .field__comment-ellipsis {
        position: absolute;
        bottom: -2px;
        right: 5px;
        background-color: white;
        padding-left: 3px;
      }

      &:hover {
        box-shadow: 0 0 5px 2px color(black, bright);
        overflow: visible;
        max-height: none;
        z-index: 1;

        .field__comment-ellipsis {
          display: none;
        }
      }
    }

    .field__comment-input {
      z-index: 2;
      background-color: color(white);
      @extend %simple-input;
      display: none;
      border-radius: 5px;
      border: solid 1px color(black, bright);
      padding: 4px 8px;
      box-shadow: 0 0 5px 2px color(black, bright);
    }

    .field__display {
      margin: 5px;
    }

    .field__display_empty {
      opacity: 0;

      .field__label_comment {
        color: color(black, light);
        background-color: color(black, pale);

        &:hover {
          box-shadow: 0 0 0 0 transparent;
        }
      }

      &:hover, &:focus {
        opacity: 1;
      }
    }

    &.field_edit-mode_hover {
      .field__display_empty {
        opacity: 1;
      }

      .field__label_comment {
        background-color: transparent;
        border: solid 1px color(black, pale);
        min-width: 120px;
        text-align: center;
        padding: 4px 8px;
        max-height: none;

        .field__comment-ellipsis {
          display: none;
        }

        &:hover {
          border-color: color(black, bright);
          box-shadow: 0 0 0 0 transparent;
        }
      }
    }

    .field__display_locked {
      .field__label_comment {
        border-style: dotted;
      }
    }

    &.field_active {
      z-index: 1;

      .field__display_empty {
        opacity: 1;
      }

      .field__label_comment {
        display: none;
      }

      .field__comment-input {
        display: block;
      }
    }
  }

  &.field_category_popover {

  }

  &.field_category_file {
    .field__input {
      display: none;
    }

    .field__display {
      color: color(black, normal, 0.7);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &:hover {
        .field__display-file-edit {
          visibility: visible;
        }

        .field__display-updated-at {
          visibility: visible;
        }
      }

      &-file {
        position: relative;

        &-preview {
          @extend %link;
          font-size: 30px;

          &:hover {
            opacity: 1;
            color: color(primary);
          }
        }

        &-edit {
          visibility: hidden;
          color: color(black);
          font-size: 14px;
          position: absolute;
          top: 13px;
          right: -20px;
          @extend %link;
        }
      }

      &-updated-at {
        visibility: hidden;
        font-size: 8px;
        text-align: center;
      }
    }

    .field__display_upload {
      font-size: 30px;
      padding: 10px;
      @extend %link;
      opacity: 0;

      &:hover {
        opacity: 1;
      }
    }

    .field__display_uploading {
      padding: 10px;
      width: 80px;
    }
  }
}