.TableField {
  align-items: center;
  display: grid;
  gap: $unit * 2;
  grid-template-columns: 1fr auto;

  &.Image {
    grid-template-columns: 1fr auto 1fr;
  }

  .Left {
    display: flex;
    flex-direction: column;
    gap: calc($unit / 2);

    label {
      color: var(--text-tertiary);
      font-size: $font-regular;
    }

    p {
      color: var(--text-secondary);
      font-size: $font-small;
      line-height: 1.1;
      max-width: 300px;

      &.jp {
        max-width: 270px;
      }
    }
  }

  .preview {
    $diameter: $unit * 6;
    background-color: $grey-90;
    border-radius: 999px;
    height: $diameter;
    width: $diameter;

    img {
      height: $diameter;
      width: $diameter;
    }

    &.fire {
      background: $fire-bg-20;
    }

    &.water {
      background: $water-bg-20;
    }

    &.wind {
      background: $wind-bg-20;
    }

    &.earth {
      background: $earth-bg-20;
    }

    &.dark {
      background: $dark-bg-10;
    }

    &.light {
      background: $light-bg-20;
    }
  }
}