:root {
    --dark: 0;
    --transition: 0.28s;
    --font-size: 2rem;
    --bg: hsl(0 0% calc((100 - (var(--dark, 0) * 100)) * 1%));
    --color: hsl(0 0% calc(var(--dark) * 100%));
}

@media(prefers-color-scheme: dark) {
    :root {
        --dark: 1;
    }
}

button {
    margin-right: 200px;
    outline-color: hsl(0 0% calc(var(--dark) * 100%));
    --padding: calc(var(--font-size) * 0.75);
    cursor: pointer;
    letter-spacing: calc(var(--font-size) * 0.02);
    font-family: sans-serif;
    font-weight: bold;
    background: var(--bg);
    font-size: var(--font-size);
    border-radius: calc(var(--font-size) * 0.5);
    border: solid hsl(0 0% calc((40 + (var(--dark) * 20)) * 1%) / calc(0.3 + (var(--hovered, 0) * 0.8)));
    color: var(--color);
    position: relative;
    transition: border-color var(--transition);
}

button > span {
    padding: 0 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: calc((var(--font-size) * 1.75) * (1 - var(--hovered, 0))) 1fr calc((var(--font-size) * 1.75) * var(--hovered, 0));
    align-items: center;
    transition: grid-template-columns var(--transition);
}

button:after {
    content: "";
    position: absolute;
    inset: calc(var(--font-size) * -0.025);
    background: hsl(0 0% calc(var(--dark) * 100%) / 0.45);
    filter: blur(calc(var(--font-size) * 0.75));
    scale: var(--hovered, 0);
    z-index: -1;
    transition: scale var(--transition);
}

button:hover {
    --hovered: 1;
}

span span:nth-of-type(1) {
    padding-right: var(--padding);
    width: var(--font-size);
}

span span:nth-of-type(3) {
    padding-left: var(--padding);
    width: var(--font-size);
}

svg {
    display: inline-block;
    transition: translate var(--transition) ease-in-out, opacity var(--transition) ease-in-out;
}

button:is(:focus-visible, :hover) {
    --hovered: 1;
}

span span:nth-of-type(3) svg {
    stroke-width: 3;
    translate: calc((1 - var(--hovered, 0)) * (var(--font-size) * 3)) 8%;
    width: calc(var(--font-size) * 1);
    opacity: var(--hovered, 0);
}

span span:nth-of-type(1) svg {
    stroke-width: 3;
    translate: calc(((var(--hovered, 0) * var(--font-size)) * -3) + 10%) 8%;
    width: calc(var(--font-size) * 0.8);
}