/* basic style */
.field-title {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.field-title:not(:first-child) {
    margin-top: 1.5em;
}


/* accent-color */
.demo-form {
    --indicator-color: #e91e63;
}

.simple-radio, .simple-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
:is(.simple-radio, .simple-checkbox) > input {
    width: 1em;
    height: 1em;
    cursor: pointer;

    accent-color: var(--indicator-color);

    outline-color: var(--indicator-color);
}

/* inputを非表示 */
.field-title {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.field-title:not(:first-child) {
    margin-top: 1.5em;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* radio & checkbox */
.radio-field,
.checkbox-field {
    display: grid;
    gap: 0.25em;
}
.custom-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625em;
    cursor: pointer;
}

/* custom indicator */
.custom-indicator {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-color: #fff;
    border: 2px solid var(--color--border);
    transition-duration: 0.3s;
    transition-property: background, border-color, box-shadow;
    flex-shrink: 0;
}
.radio-indicator {
    border-radius: 50%;
}
.checkbox-indicator {
    border-radius: 4px;
}

/* check mark */
.custom-indicator::after {
    content: "";
    position: absolute;
    display: none;
}

/* 小さな円 */
.radio-indicator::after {
    top: 50%;
    left: 50%;
    width: 48%;
    height: 48%;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.checkbox-indicator::after {
    width: 30%;
    height: 60%;
    border: solid #fff;
    border-width: 0 3px 3px 0;

    top: 50%;
    left: 50%;
    rotate: 45deg;
    translate: -50% -65%;
}

.visually-hidden:checked + .custom-indicator {
    background-color: var(--indicator-color);
    border-color: var(--indicator-color);
    box-shadow: var(--shadow--sm);
}
.visually-hidden:checked + .custom-indicator::after {
    display: block;
}

.visually-hidden:focus-visible + .custom-indicator {
    outline: 4px solid color-mix(in srgb, var(--indicator-color) 25%, transparent);
    border-color: var(--indicator-color);
}

/* toggle */
.toggle-field {
    display: grid;
    gap: 0.5em;
}
.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 0.625em;

    --thumb-size: 1.25em;
}

/* track */
.toggle-track {
    position: relative;
    width: calc(var(--thumb-size) * 2);
    height: var(--thumb-size);
    background-color: #d1d5db;
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--thumb-size) - 4px);
    height: calc(var(--thumb-size) - 4px);
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 色を変更 */
.visually-hidden:checked + .toggle-track {
    background-color: var(--indicator-color);
}

.visually-hidden:checked + .toggle-track > .toggle-thumb {
    transform: translateX(var(--thumb-size));
}

.visually-hidden:focus-visible + .toggle-track {
    outline: 4px solid color-mix(in srgb, var(--indicator-color) 25%, transparent);
}

/* card radio button */
.demo-form-card-radio {
    --indicator-color: #2563eb;
}
.field-title {
    font-weight: bold;
    margin-bottom: 1em;
    font-size: var(--font-size--md);
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* card radio */
.radio-card-field {
    display: grid;
    gap: 1.5em;
}
.radio-card {
    position: relative;
    display: block;
    cursor: pointer;
}
.radio-card__content {
    display: grid;
    gap: 0.25em;
    height: 100%;
    padding: 1em;
    background-color: #fff;
    border: 2px solid var(--color--border);
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
}
.radio-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.radio-card__title {
    font-weight: bold;
    font-size: var(--font-size--md);
}
.radio-card__description {
    font-size: var(--font-size--sm);
    margin-bottom: 0.5em;
    opacity: 0.8;
}
.radio-card__price {
    font-weight: bold;
    font-size: var(--font-size--lg);
}
.radio-card__price > span {
    font-size: var(--font-size--xs);
    opacity: 0.8;
    font-weight: normal;
}

/* 選択されたとき */
.visually-hidden:checked + .radio-card__content {
    border-color: var(--indicator-color);
    background-color: color-mix(in srgb, var(--indicator-color) 5%, transparent);
    box-shadow: var(--shadow--md);
}
.visually-hidden:focus-visible + .radio-card__content {
    outline: 2px solid var(--indicator-color);
}
.radio-card:hover .radio-card__content {
    border-color: var(--indicator-color);
}