input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="number"],
input[type="password"],
select,
textarea {
  padding-inline: var(--spacing-6);
  padding-block: var(--spacing-4);
  font-size: var(--font-size-6);
  line-height: var(--line-height-1);
  color: var(--color-text-base-middle);
  min-height: 44px;
  border-radius: var(--radius-4);
  border: 1px solid var(--color-border-base-high);
  &.full {
    width: 100%;
  }
  &:disabled,
  &.disabled {
    cursor: not-allowed;
    background-color: var(--grey-1);
    color: var(--color-text-base-placeholder);
  }
}

input[type="file"] {
  color: var(--color-text-base-middle);
  cursor: pointer;
  width: 100%;
  font-size: var(--font-size-4);
}

::file-selector-button,
::-webkit-file-upload-button {
  background: var(--color-surface-base-primary);
  color: var(--color-text-base-middle);
  border: none;
  cursor: pointer;
  border: 1px solid var(--color-border-base-high);
  border-radius: var(--rad-action-md);
  font-weight: bold;
  padding: var(--spacing-6) var(--spacing-8);
  margin-right: 1rem;
}

select {
  appearance: none;
  align-items: center;
  background-repeat: no-repeat;
  background-position: right var(--spacing-4) center;
  background-image: url('data:image/svg+xml;utf8,<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.40664 6.39834L0.210488 0.398337L10.6028 0.398338L5.40664 6.39834Z" fill="%23A64E60"/></svg>');
  padding-right: var(--spacing-12);
  /* ドロップダウン部分全体のスタイル */
  ::picker(select) {
    border-radius: var(--radius-4);
    background: var(--color-surface-base-primary);
    position: relative;
    box-shadow: 0 8px 24px -0.64 rgba(0, 0, 0, 0.1);
    min-width: 240px;
  }

  /* option要素のスタイル */
  option {
    margin: 0 4px;
    font-size: var(--font-size-6);
    cursor: pointer;
  }

  /* 選択されているoption要素のbefore要素（チェックマーク） */
  option::before {
    position: absolute;
    right: 16px;
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" role="graphics-symbol" viewBox="0 0 14 14" class="check" style="width:100%25;height:100%25;display:block;fill:inherit;flex-shrink:0;"%3E%3Cpolygon points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"%3E%3C/polygon%3E%3C/svg%3E');
  }
  /* ホバー・フォーカスされているoption要素のスタイル */
  option:hover,
  option:focus-visible {
    background-color: rgba(55, 53, 47, 0.06);
    outline: none;
  }
}

.input-bar {
  border-radius: var(--radius-4);
  border: 1px solid var(--color-border-base-high);
  display: inline-flex;
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="datetime"],
  input[type="number"],
  input[type="password"],
  select {
    border: none;
    border-radius: 0;
    background-color: transparent;
    border-right: 1px solid var(--color-border-base-middle);
    &:last-child {
      border-right: none;
    }
  }
  &.full {
    width: 100%;
    * {
      flex: 1;
    }
  }
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  display: inline-flex;
  &:focus-within {
    span.input-style {
      border-color: var(--color-border-primary);
      box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
    }
  }
  input[type="checkbox"],
  input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    &:disabled ~ span.input-style {
      border-color: var(--color-border-base-middle);
      background: var(--color-surface-base-tertiary);
    }
  }
  span.input-style {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border-base-high);
  }
  span.label {
    display: inline-flex;
    min-height: 24px;
    padding-inline: var(--spacing-3);
    padding-block: var(--spacing-1);
    font-size: var(--font-size-6);
    line-height: var(--line-height-2);
    color: var(--color-text-base-middle);
  }
}
label:has(input[type="checkbox"]) {
  input[type="checkbox"]:checked ~ span.input-style {
    border-color: var(--color-border-primary);
    background: var(--color-surface-primary);
    &:after {
      content: "";
      width: 24px;
      height: 24px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.293 5.29297C19.6835 4.90245 20.3165 4.90245 20.707 5.29297C21.0976 5.68349 21.0976 6.31651 20.707 6.70703L9.70703 17.707C9.31651 18.0976 8.68349 18.0976 8.29297 17.707L3.29297 12.707C2.90245 12.3165 2.90245 11.6835 3.29297 11.293C3.65909 10.9269 4.23809 10.9043 4.63086 11.2246L4.70703 11.293L9 15.5859L19.293 5.29297Z" fill="%23FFFFFF"/></svg>');
      background-repeat: none;
      background-position: left 1px top 1px;
    }
  }
  span.input-style {
    position: relative;
    border-radius: var(--radius-3);
  }
}
label:has(input[type="radio"]) {
  input[type="radio"]:checked ~ span.input-style {
    border-color: var(--color-border-primary);
    border-width: 8px;
  }
  span.input-style {
    border-radius: var(--radius-round);
  }
}

/* Layout */
fieldset {
  border: none;
  padding: 0;
}
.c-form-group {
  padding: var(--spacing-10) 0;
}
.form-control {
  display: grid;
  gap: var(--spacing-4);
  padding-block: var(--spacing-6);
  &.sm {
    gap: var(--spacing-3);
    padding-block: var(--spacing-4);
  }
}
.form-control-bar {
  display: flex;
  gap: var(--spacing-2);
}
.form-control-label {
  display: flex;
  gap: var(--spacing-2);
  padding-inline: var(--spacing-1);
  label,
  legend {
    color: var(--color-text-base-high);
    font-size: var(--font-size-4);
    font-weight: 700;
    line-height: var(--line-height-1);
    padding: 0;
  }
  &.sm {
    label,
    legend {
      color: var(--color-text-base-middle);
      font-size: var(--font-size-3);
    }
  }
  .required-label {
    font-size: var(--font-size-1);
    font-weight: bold;
    line-height: var(--line-height-1);
    display: inline-flex;
    border-radius: var(--radius-round);
    padding-block: var(--spacing-1);
    padding-inline: var(--spacing-4);
    background: var(--rose-1);
    color: var(--color-text-primary);
  }
  .optional-label {
    font-size: var(--font-size-1);
    font-weight: bold;
    line-height: var(--line-height-1);
    display: inline-flex;
    border-radius: var(--radius-round);
    padding-block: var(--spacing-1);
    padding-inline: var(--spacing-4);
    background: var(--blue-2);
    color: var(--color-text-info);
  }
}
.form-control-note {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  color: var(--color-text-base-middle);
  padding-inline: var(--spacing-1);
}
.form-control-error {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  color: var(--color-text-danger);
  padding-inline: var(--spacing-1);
  .icon {
    width: 16px;
    height: 16px;
    margin-right: var(--spacing-2);
    fill: var(--color-text-danger);
  }
}
.form-control-input-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6) var(--spacing-8);
  padding-block: var(--spacing-2);
  &.vertical {
    flex-direction: column;
    align-items: flex-start;
  }
  &.grid {
    &.grid-2 {
      > * {
        min-width: calc((100% / 2) - var(--spacing-4));
      }
    }
    &.grid-3 {
      > * {
        min-width: calc((100% / 3) - var(--spacing-4));
      }
    }
  }
}
.form-input-duration {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  select {
    flex: 1;
  }
}
.form-divider {
  width: 100%;
  border-top: 1px solid var(--color-border-base-middle);
  margin-block: var(--spacing-8);
}
.form-submit {
  padding-top: var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  form {
    width: 100%;
  }
  &.horizontal {
    flex-direction: row;
  }
  .btn.main {
    flex: 1;
  }
}