@import 'base';

.fields-table {
  @extend %block;
  $border: solid 1px color(black, bright);
  $icon-width: 40px;
  $row-height: 35px;
  $option-width: 140px;
  border-top: $border;
  border-left: $border;
  border-right: $border;

  &__header {
    background-color: color(black, pale);
    height: $row-height;
    padding: 0 $icon-width;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-options {
      display: flex;

      &-option {
        width: $option-width;
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 10px;
        padding: 0 20px;
      }
    }
  }

  &__fields-placeholder {
    border-bottom: $border;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: color(black, pale);
  }

  &__fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  &__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-bottom: $border;

    &.fields-table__field_locked {
      .fields-table__field-header {
        opacity: 0.30;
      }
    }

    $open-background-color: color(black, translucent);
    $hover-background-color: color(black, pale, 0.54);
    $closed-background-color: color(white);

    &.fields-table__field_unlocked {
      &.fields-table__field_editable {
        &.fields-table__field_open {
          .fields-table__field-header {
            background-color: $open-background-color;

            &:hover {
              background-color: $hover-background-color;
            }
          }
        }

        .fields-table__field-header {
          &:hover {
            background-color: $open-background-color;
          }

          &-toggle-open {
            @extend %link;
          }
        }
      }

      .fields-table__field-header-options-option {
        @extend %link;

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

    &-header {
      display: flex;
      align-items: center;
      padding-left: $icon-width;
      height: $row-height;
      background-color: $closed-background-color;

      &-options {
        display: flex;
        justify-content: flex-end;
        height: 100%;
        align-items: stretch;

        &-option {
          width: $option-width;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      &-name {
        flex: 1;
        display: flex;
        align-items: center;

        &-label {
          margin-right: 10px;
          font-weight: 700;
        }

        &-settings {
          font-size: 10px;
        }

        &-warning {
          margin-left: 10px;
          color: color(black, bright);

          &-label {
            padding-left: 5px;
          }
        }
      }

      &-toggle-open {
        flex-shrink: 0;
        width: $icon-width;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    &-details {
      display: flex;
      padding: 0 $icon-width;
      flex-wrap: wrap;
      align-items: center;
      background-color: white;

      &-simple {
        padding: 10px 0;
        display: flex;
        align-items: center;
      }

      &-simple_template {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }

  &__value {
    height: $row-height;
    display: flex;
    align-items: center;

    &-label {
      @extend %link;
      margin-right: 10px;

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

    &-settings {
      font-size: 10px;
    }
  }

  &__input {
    @extend %simple-input;
    flex: 1;
  }
}

.fields-table-delete-value {
  padding: 30px 30px 10px 30px;

  &__button {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}