<main>
    <form>
        <label>
            <input type="radio" name="inventor" value="bell">
            <span class="truncate">选择1</span>
        </label>
        <label>
            <input type="radio" name="inventor" value="morse">
            <span class="truncate">选择2</span>
        </label>
        <label>
            <input type="radio" name="inventor" value="edison">
            <span class="truncate">选择3</span>
        </label>
        <div class="selection"></div>
    </form>
</main>

{/tabs-pane}
{tabs-pane label="css"}

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),90%,90%);
    --fg: hsl(var(--hue),90%,10%);
    --primary: hsl(var(--hue),90%,50%);
    --trans-dur: 0.3s;
    --trans-timing: cubic-bezier(0.65,0,0.35,1);
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body,
input {
    color: var(--fg);
    font: 1em/1.5 "DM Sans", sans-serif;
}
body {
    background-color: var(--bg);
    display: flex;
    height: 100vh;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}
main {
    margin: auto;
    padding: 1.5em 0;
    width: 100%;
}
form {
    margin: auto;
    max-width: 20em;
    position: relative;
    width: calc(100% - 3em);
}
label,
input[type="radio"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
label {
    background-color: hsla(0,0%,100%,0);
    border-radius: 0.75em;
    display: flex;
    align-items: center;
    padding: 1.5em;
    transition: background-color var(--trans-dur);
}
input[type="radio"] {
    background-color: hsl(0,0%,100%);
    border-radius: 50%;
    box-shadow:
        0 0 0 0.0625em hsl(var(--hue),90%,80%),
        0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
    flex-shrink: 0;
    margin-inline-end: 1em;
    outline: transparent;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    transition:
        background-color var(--trans-dur),
        box-shadow var(--trans-dur);
    -webkit-appearance: none;
    appearance: none;
}
input[type="radio"]:before,
input[type="radio"]:after {
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    transform: scale(0);
    transition: transform var(--trans-dur) var(--trans-timing);
}
input[type="radio"]:before {
    box-shadow:
        0 0 0 0.5em var(--primary) inset,
        0 0 0 0.0625em var(--primary);
    top: -0.0625em;
    left: -0.0625em;
    width: calc(100% + 0.125em);
    height: calc(100% + 0.125em);
}
input[type="radio"]:after {
    background-color: hsl(0,0%,100%);
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
}
input[type="radio"]:checked:before,
input[type="radio"]:checked:after {
    transform: scale(1);
}
label:has(input[type="radio"]:checked),
label:has(input[type="radio"]:not(:checked)):hover {
    background-color: hsla(0,0%,100%,0.5);
}
.selection {
    border-radius: 0.75em;
    box-shadow: 0 0 0 0.125em var(--primary) inset;
    display: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.5em;
    transition: transform var(--trans-dur) var(--trans-timing);
}
label:has(input[type="radio"]:checked) ~ .selection {
    animation: fade-in var(--trans-dur) var(--trans-timing);
    display: inherit;
}
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
    transform: translateY(100%);
}
label:nth-of-type(3):has(input[type="radio"]:checked) ~ .selection {
    transform: translateY(200%);
}
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),90%,10%);
        --fg: hsl(var(--hue),90%,90%);
    }
    label {
        background-color: hsla(var(--hue),90%,30%,0);
    }
    label:has(input[type="radio"]:checked),
    label:has(input[type="radio"]:not(:checked)):hover {
        background-color: hsla(var(--hue),90%,30%,0.5);
    }
    input[type="radio"] {
        background-color: hsl(var(--hue),90%,30%);
        box-shadow:
            0 0 0 0.0625em hsl(var(--hue),90%,50%),
            0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
    }
}

/* Animations */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

{/tabs-pane}