/* CSS Document */

/************/
/* SCHUIFJE */
/************/
.extras {
    --extras-font:sans-serif;
    --extras-margin:.25em;
    --extras-size:1rem;
    
    --extras-title-active-color:dimgrey;
    
    --extras-schuif-idle-color:lightgrey;
    --extras-schuif-active-color:dimgrey;
    --extras-schuif-active-background:white;
    --extras-schuif-border-width:2px;

    --extras-neg-text:"nee";
    --extras-pos-text:"ja";
}

.extras, .extras *, .extras::after, .extras::before {
	box-sizing: border-box;
	transition:.5s;
}

.extras{
    position:absolute;
    top:0; right:0;
    transform:translate(calc(-3*var(--extras-margin)), calc(2*var(--extras-margin)));
	
	font-family: var(--extras-font);
	font-size:var(--extras-size);
	color:transparent;
    
    display:flex;
    align-items: center;
    
    z-index:1000;
}
.extras:hover{
	color:var(--extras-title-active-color);
}

/* schuifje */
.extras::before{
	content:"";
	width:calc(2*var(--extras-size)); height:var(--extras-size);
	
	background-color:transparent;
	border:solid var(--extras-schuif-border-width) var(--extras-schuif-idle-color);
    border-radius:calc(var(--extras-size) / 2);
    
    order:3;
}

.extras::after{
	content:"";
	width:calc(var(--extras-size) - 2*var(--extras-schuif-border-width));
    height:calc(var(--extras-size) - 2*var(--extras-schuif-border-width));
    
	background: var(--extras-schuif-idle-color);
	border-radius:50%;
    
    transform: translateX(calc(var(--extras-size) - var(--extras-schuif-border-width)));
    order:2;
}

:target .extras::after{
	transform: translateX(calc(2*var(--extras-size) - var(--extras-schuif-border-width)));
}

.extras:hover::before{
	background-color:var(--extras-schuif-active-background);
	border-color:var(--extras-schuif-active-color);
}

.extras:hover::after{
	background-color:var(--extras-schuif-active-color);
}

/* links */
.extras a {
    position:relative;
	color:var(--extras-schuif-idle-color);
	outline:none;
    z-index:3;
}

a[href="#normal"] {
	margin-right:calc(-1*var(--extras-size) + 2*var(--extras-schuif-border-width));
    margin-left:.375em;
	padding-right:.25em;
    order:1;
    text-decoration:none;
    cursor:default;
}

a[href="#normal"]::after{
    content:var(--extras-neg-text);
}

a[href="#extras"] {
	margin-left:calc(-2*var(--extras-size));
	padding-left:calc(2*var(--extras-size) + .25em);
    order:4;
    text-decoration:underline;
    cursor:pointer;
}

a[href="#extras"]::after{
    content:var(--extras-pos-text);
}

.extras:hover a[href="#normal"],
.extras:hover a[href="#extras"] {
	color:var(--extras-schuif-active-color);
}

:target a[href="#normal"] {
	margin-right:calc(-3*var(--extras-size) + 2 * var(--extras-schuif-border-width));
    padding-right:calc(2*var(--extras-size) + .25em);
    text-decoration:underline;
	cursor:pointer;
}

:target a[href="#extras"] {
	margin-left:0;
	padding-left:.25em;
    text-decoration:none;
	cursor:default;
}