/*
 * form系のスタイル
 * wp-admin/css/forms.css にinputの属性を指定した定義があるが、bsにはない。
 * クラス名より属性指定の方が優先度が高いためbsのクラスが反映されない要素を上書きする必要がある
 */

textarea,
input {
  font-size: 16px;
}

input[type="text"],
input[type="password"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
  border-radius: var(--bs-border-radius);
  border: var(--bs-border-width) solid var(--bs-border-color);
  color: var(--bs-body-color);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: 0;
}

input[type="radio"] {
  margin-top: 0.25em;
}

input[readonly] {
  background-color: #ffffff;
}

input[type="checkbox"] {
  // radioと同じにしたいが、0.25emだとなぜかズレる
  margin-top: 0.5em;
}

input[type="checkbox"]:checked::before {
  content: none;
}

input[type="radio"]:checked::before {
  content: none;
}

@media screen and (max-width: 782px){
  // wpではサイズが大きくなるが、変わらないように修正
  input[type=checkbox], input[type=radio] {
    height: 1rem;
    width: 1rem;
  }
}

.#{yoyaku} {
  .y-regular-text {
    width: 25em;
  }

  .y-sort-wrap {
    width: 10em;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .y-form-wrap {
    margin-top: 1rem;
  }

  // bs form-selectクラス
  .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }

  .form-check-input {
    background-image: var(--bs-form-check-bg-image);
  }

  .form-checkbox-box {
      padding-top: calc(0.375rem + var(--bs-border-width));
      //padding-bottom: calc(0.375rem + var(--bs-border-width));
      //margin-bottom: 0;
      //font-size: inherit;
      //line-height: 1.5;
  }
}