.TableField {
  align-items: center;
  display: grid;
  gap: $unit-2x;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  padding: $unit-half 0;
  width: 100%;

  @include breakpoint(phone) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  &:hover .Left .Info h3 {
    color: var(--accent-blue);
  }

  .Left {
    display: flex;
    flex-direction: row;
    gap: $unit;
    width: 100%;

    .Info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
      gap: $unit-half;
    }

    .Image {
      display: none;

      .preview {
        $diameter: $unit-5x;
        width: $diameter;
        height: $diameter;

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

      @include breakpoint(phone) {
        display: block;
      }
    }

    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;
      }
    }
  }

  .Right {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: $unit-2x;
    width: 100%;

    @include breakpoint(phone) {
      .Image {
        display: none;
      }
    }

    .SelectTrigger {
      width: 100%;
    }
  }

  .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;
    }
  }
}