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

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

  &.numeric .right > .input,
  &.numeric .right > .duration {
    text-align: right;
    max-width: $unit-12x;
    width: $unit-12x;
  }

  &.numeric .right > .Duration {
    justify-content: flex-end;
    box-sizing: border-box;
  }

  &.disabled {
    &:hover .left .info h3 {
      color: var(--text-tertiary);
    }

    .left .info h3 {
      color: var(--text-tertiary);
    }
  }

  &.switch {
    @include breakpoint(phone) {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .left {
    align-items: center;
    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;

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

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

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

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