/* Start Text Highlight */

:root {
    --bg-color-hsl: 59, 3%, 94%;
    --bg-color: hsl(var(--bg-color-hsl));
    --bg-color-translucent: hsla(var(--bg-color-hsl), 0.95);
    --bg-color-highlight: hsl(60, 90%, 50%);
    --color-text: hsl(192, 14%, 20%);
    --color-text-highlight: hsl(192, 14%, 0%);
    --page-width: 80ch;
    --paragraph-font-size: min(max(1.2rem, 4vw), 1.4rem);
    --header-font-size: min(max(2rem, 8vw), 4rem);
    --space: 2rem;
    --padding: 8vmin;
    --duration: 1s;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
}


* {
    box-sizing: border-box;
}

body {

    color: var(--color-text);
    background-color: var(--bg-color);
    transition: background calc(var(--duration) / 4) var(--ease);
}

.text-highlight {
    all: unset;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: color calc(var(--duration) / 4) var(--ease), background-color calc(var(--duration) / 4) var(--ease), background-size var(--duration) var(--ease);
}

.text-highlight.active {
    color: var(--color-text-highlight);
    background-size: 100% 100%;
}

[data-highlight=background] .text-highlight {
    background-image: linear-gradient(var(--bg-color-highlight), var(--bg-color-highlight));
}

[data-highlight=half] .text-highlight {
    --line-size: 0.5em;
    background-image: linear-gradient(transparent calc(100% - var(--line-size)), var(--bg-color-highlight) var(--line-size));
}

[data-highlight=underline] .text-highlight {
    --line-size: 0.15em;
    background-image: linear-gradient(transparent calc(100% - var(--line-size)), var(--color-text) var(--line-size));
}

.text-highlight::before,
.text-highlight::after {
    position: absolute;
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.text-highlight::before {
    content: " [highlight start] ";
}

.text-highlight::after {
    content: " [highlight end] ";
}

.wrapper {
    overflow: hidden;
    visibility: hidden;
}

/* END Text Highlight */