@import '../../style/constants.less';
@import '../../style/mixin.less';

.@{yw-prefix}-grid {
  .@{yw-prefix}-grid-item {
    .@{yw-prefix}-grid-item-label {
      font-weight: bold;
      word-break: break-all;
    }

    .@{yw-prefix}-grid-item-value {
      word-break: break-all;
      .@{ant-prefix}-form-item {
        width: 100%;
        margin-bottom: 0;

        .@{ant-prefix}-form-item-control {
          flex: 1;

          .@{ant-prefix}-form-item-control-input-content {
            display: flex;
          }
        }
      }
    }

    .@{yw-prefix}-grid-item-label,
    .@{yw-prefix}-grid-item-value {
      width: 0;
      padding: @base-padding @base-padding * 2;
      line-height: 1.5715;

      > .@{yw-prefix}-grid-item-ellipsis {
        .ellipsis();
      }

      > .@{yw-prefix}-grid-item-center {
        display: flex;
        align-items: center;
      }
    }

    &.direction-vertical {
      width: 0;

      .@{yw-prefix}-grid-item-label {
        display: block;
      }

      .@{yw-prefix}-grid-item-label,
      .@{yw-prefix}-grid-item-value {
        width: 100%;
        padding: @base-padding / 2 @base-padding * 2;
      }
    }
  }

  &.size-small {
    .@{yw-prefix}-grid-item {
      .@{yw-prefix}-grid-item-label,
      .@{yw-prefix}-grid-item-value {
        .media-other(
          xxl,
          {padding: @base-padding - 2 (@base-padding - 2) * 2,
          }
        );

        .media(xxl, {padding: @base-padding @base-padding * 2, });
      }

      &.direction-vertical {
        .@{yw-prefix}-grid-item-label,
        .@{yw-prefix}-grid-item-value {
          .media-other(
            xxl,
            {padding: @base-padding / 2 - 2 (@base-padding - 2) * 2,
            }
          );

          .media(xxl, {padding: @base-padding / 2 @base-padding * 2, });
        }
      }
    }
  }

  &.size-middle {
    .@{yw-prefix}-grid-item {
      .@{yw-prefix}-grid-item-label,
      .@{yw-prefix}-grid-item-value {
        .media-other(
          xxl,
          {padding: @base-padding + 2 (@base-padding + 2) * 2,
          }
        );

        .media(xxl, {padding: @base-padding + 4 (@base-padding + 4) * 2, });
      }

      &.direction-vertical {
        .@{yw-prefix}-grid-item-label,
        .@{yw-prefix}-grid-item-value {
          .media-other(
            xxl,
            {padding: @base-padding / 2 + 2 (@base-padding - 2) * 2,
            }
          );

          .media(xxl, {padding: @base-padding / 2 + 4 @base-padding * 2, });
        }
      }
    }
  }

  &.size-large {
    .@{yw-prefix}-grid-item {
      .@{yw-prefix}-grid-item-label,
      .@{yw-prefix}-grid-item-value {
        .media-other(
          xxl,
          {padding: @base-padding + 6 (@base-padding + 6) * 2,
          }
        );

        .media(xxl, {padding: @base-padding + 8 (@base-padding + 8) * 2, });
      }

      &.direction-vertical {
        .@{yw-prefix}-grid-item-label,
        .@{yw-prefix}-grid-item-value {
          .media-other(
            xxl,
            {padding: @base-padding / 2 + 6 (@base-padding - 2) * 2,
            }
          );

          .media(xxl, {padding: @base-padding / 2 + 8 @base-padding * 2, });
        }
      }
    }
  }

  &.bordered {
    &.multiterm {
      position: relative;
      .min-border-before(top, @grid-border-color);
      .min-border-after(left, @grid-border-color);
    }

    &.uniterm {
      .@{yw-prefix}-grid-item {
        position: relative;
        .min-border-before(top, @grid-border-color);
        .min-border-after(left, @grid-border-color);
      }
    }

    .@{yw-prefix}-grid-item {
      .@{yw-prefix}-grid-item-label {
        position: relative;
        .min-border-before(right, @grid-border-color);
        .min-border-after(bottom, @grid-border-color);

        background-color: @grid-label-bgColor;
      }

      .@{yw-prefix}-grid-item-value {
        position: relative;
        .min-border-before(right, @grid-border-color);
        .min-border-after(bottom, @grid-border-color);
      }
    }
  }
}