._FormText_11bo1_1 {
  --local-foreground: var(--TEXT-BLACK);
  --local-background: var(--BG-WHITE);
  --local-outline: var(--COLOR-GRAY-400);
  --local-placeholder: var(--COLOR-GRAY-400);
  --local-padding-block: var(--SPACE-BLOCK-SPACING-8);
  --local-padding-inline: var(--SPACE-BLOCK-SPACING-16);
  --local-width: 240px;

  border: 1px solid var(--local-outline);
  display: inline-flex;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  width: 100%;

  @media (768px < width) {
    width: var(--local-width);
  }

  &:focus-within {
    outline: medium solid currentColor;
  }

  :where(._item_11bo1_25) {
    appearance: none;
    background-color: var(--local-background);
    border: 0;
    color: var(--local-foreground);
    display: block;
    font-size: var(--FONT-SIZE-XS);
    height: 40px;
    line-height: 1.5;
    outline: none;
    padding: var(--local-padding-block) var(--local-padding-inline);
    width: 100%;

    &::placeholder {
      color: var(--local-placeholder);
      opacity: 0.5;
    }

    @media (width > 768px) {
      font-size: var(--FONT-SIZE-BASE);
    }
  }

  &:has(:disabled) {
    --local-background: #f2f2f5;
    --local-foreground: #8e8e94;

    :is(&::before, &::placeholder, &::-webkit-datetime-edit-fields-wrapper) {
      color: var(--local-foreground);
    }

    :is(._item_11bo1_25) {
      cursor: not-allowed;
    }
  }

  &._theme-large_11bo1_61 {
    --local-width: 480px;
  }

  &._theme-full_11bo1_65 {
    --local-width: 100%;
  }

  &:has([type='date']) {
    /* icon */
    &::before {
      background-color: currentColor;
      content: '';
      height: 24px;
      mask-image: url('/assets/images/common/icon-calendar.svg');
      mask-repeat: no-repeat;
      mask-size: cover;
      pointer-events: none;
      position: absolute;
      right: var(--local-padding-inline);
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      color: var(--COLOR-GRAY-700);
    }
  }

  :where([type='date']) {
    font-size: var(--FONT-SIZE-XS) !important;
    line-height: normal;

    @media (width > 768px) {
      font-size: var(--FONT-SIZE-BASE) !important;
    }
  }
}
._FormTextarea_1aezl_1 {
  --local-foreground: var(--TEXT-BLACK);
  --local-background: var(--BG-WHITE);
  --local-outline: var(--COLOR-GRAY-400);
  --local-placeholder: var(--COLOR-GRAY-400);
  --local-padding-block: var(--SPACE-BLOCK-SPACING-8);
  --local-padding-inline: var(--SPACE-BLOCK-SPACING-16);
  --local-width: 240px;

  border: 1px solid var(--local-outline);
  display: inline-flex;
  max-width: 100%;
  position: relative;
  width: 100%;

  @media (768px < width) {
    width: fit-content;
  }

  &:focus-within {
    outline: medium solid currentColor;
  }

  &:has(textarea) {
    display: flex;

    :where(._item_1aezl_27) {
      min-height: 200px;
    }
  }

  :where(._item_1aezl_27) {
    appearance: none;
    background-color: var(--local-background);
    border: 0;
    color: var(--local-foreground);
    display: block;
    font-size: var(--FONT-SIZE-XS);
    outline: none;
    overflow: auto;
    padding: var(--local-padding-block) var(--local-padding-inline);
    resize: both;
    width: 100%;
    max-width: min(
      100vw -
      var(--SPACE-BLOCK-SPACING-32),
      var(--CONTENT-WIDTH-PC)
    );

    @media (768px < width) {
      width: var(--local-width);
    }

    @media (width > 768px) {
      font-size: var(--FONT-SIZE-BASE);
    }

    &::placeholder {
      color: var(--local-placeholder);
      opacity: 0.5;
    }
  }

  &:has(:disabled) {
    --local-background: #f2f2f5;
    --local-foreground: #8e8e94;

    :is(&::before, &::placeholder, &::-webkit-datetime-edit-fields-wrapper) {
      color: var(--local-foreground);
    }

    :is(._item_1aezl_27) {
      cursor: not-allowed;
    }
  }

  &._theme-large_1aezl_77 {
    :where(._item_1aezl_27) {
      --local-width: 480px;
    }
  }

  &._theme-full_1aezl_83 {
    width: 100%;

    :where(._item_1aezl_27) {
      --local-width: 100%;

      resize: vertical;
    }
  }
}
._TextPlaceholder_1r3r6_1 {
  margin-top: var(--SPACE-BLOCK-SPACING-8);
  font-size: var(--FONT-SIZE-XS);
  color: var(--TEXT-GRAY);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}