/* Abstracts */

:host {
    --surface-inset: inset 0 1px 0 0 #fff;
    --surface-inset-500: inset 0 1px 0 0 #ffffff80;
    --surface-inset-200: inset 0 1px 0 0 #ffffff40;
    --back-out: linear(0 0%,0.1935 4.37%,0.3671 8.83%,0.521 13.38%,0.6557 18.04%,0.7716 22.82%,0.869 27.73%,0.9488 32.81%,1.0111 38.08%,1.0512 42.81%,1.0792 47.75%,1.0953 52.97%,1.1 58.55%,1.0956 63.36%,1.0838 68.73%,1.0119 90.98%,1.0029 95.69%,1 100%);
    --shadow-color: 220 3% 15%;
    --shadow-color: 60 0% 15%;
    --shadow-strength: 40%;
    --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
    /* --spacing: calc(.1lh + 1vw); */
    --spacing: min(calc(.1lh + 1vw), 14px);
}

/* General */

:host {
    /* font-family: system-ui, sans-serif; */
    /* -webkit-font-smoothing: antialiased; */
    container: freeze-dates / inline-size;
    display: block;
    line-height: 1.5;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

:host > .wrapper {
    font-size: 16px;
    font-size: clamp(14px, 2.5cqw, 18px);
}

/* *:focus-visible { 
    outline-style: dotted;
    outline-width: 2px;
    button, [role=button] { outline-offset:  -1px; }    
} */

*, :is(::before, ::after) { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 { 
    line-height: 1.2;
    text-wrap: balance;
    margin-block-end: .5lh;
}

hr { opacity: .75; }

abbr { cursor: help; }


/* Utilities */

.relative { position: relative; }

.transform-origin { transform-origin: left; }

.no-padding { padding: 0; }
.pis { padding-inline-start: .75lh; }
/* .no-mbs { margin-block-start: 0; } */
.no-margin { margin: 0; }
.mbe { margin-block-end: .75lh; }

.gap { gap: .5lh; }

.grid { display: grid; }

svg {
	height: 1em;
	width: 1em;
}

kbd {
	font-size: 0.9em;
    font-size: 90%;
	/* font-weight: bold; */
	border: solid 1px #88888880;
	padding-inline: 0.5ch;
	border-radius: 3px;
}

.flex {
    display: flex;
    gap: 1lh;
    row-gap: 0lh;
    flex-wrap: wrap;
	align-items: center;
}

.small-gap {
    gap: 0.5lh;
}

.space-between { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    column-gap: .5lh;
}

.subdued {
    color: #666;
    font-size: 75%;
    a { color: inherit; text-decoration: none; }
    a:hover { text-decoration: underline; }
}

/* .vibrant {} */

.gray {
    color: #888888;
}

.no-text-shadow {
    text-shadow: none;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.error {
    color: #d9534f;
    padding: .5lh;
    background-color: #fdf7f7;
    border-radius: 4px;
}


button, .button {
    cursor: pointer;
    touch-action: manipulation;
    font-size: .9rem;
    font-size: 90%;
    transition: scale .2s ease-out;
    /* &:hover:not(:disabled) { filter: contrast(1.25); } */
    &:active:not(:disabled) { scale: 0.98; }
    &:disabled {
        opacity: .5;
        filter: brightness(0.9);
        pointer-events: none;
    }
}

/* Button */
.button {
	/* 	width: clamp(1rem, 11lh, 100%); */
    height: fit-content;
	display: block;
	cursor: pointer;
	display: block;
	text-decoration: none;
	font-family: inherit;
    -webkit-font-smoothing: antialiased;
	font-weight: normal;
	font-weight: bold;
	/* font-size: inherit; */
	font-size: 85%;
	line-height: 1.2;
	appearance: none;
	color: inherit;
	background: #efefef;
	border: solid 1px #aaa;
    border: solid 1px #00000060;
	border-radius: 5px;
    box-shadow: var(--surface-inset);
	padding: 0.5lh 0.75lh;
	transition: scale 0.3s var(--back-out, ease-in-out), background 0.2s ease-out;

	&:hover:not(:disabled) {
		background: #fff;
        background: #fafafa;
	}

	&:active:not(:disabled) {
		background: #f0f0f0;
		transform: scale(0.98);
	}
	&:focus-visible {
		outline-width: 2px;
		outline-offset: -5px;
		outline-style: dotted;
	}

    &:disabled {
        opacity: .5;
        filter: brightness(0.9);
    }

	/* Button has icon */
	&:has(> [aria-hidden]:where(:first-child, :last-child)) {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25lh;
		align-items: center;
		justify-content: center;
		text-align: center;
		/* text-align: start; */
	}

    &[aria-busy=true] [aria-hidden] {
        display: none;
    }
}

.button-container {
	display: inline grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	justify-content: space-between;
	width: 100%;
	gap: .5lh;
}

@media not print {
    .print-only { display: none; }
}
@media print {
    .no-print { display: none; }
}

/* Clickable parent */
clickable-parent,
.clickable-parent { 
    /* --back-out: linear(...); */

    position: relative;
    isolation: isolate;
    cursor: pointer;

    /* Parent filters & transitions */
    /**/
    transition: scale 0.4s var(--back-out), filter 0.3s var(--back-out);
    &:has(.clickable-element:hover) {
        filter: brightness(1.015);
        filter: brightness(1.025);
        /* scale: 1.01; */
        transition-duration: .1s;
    }
    &:has(.clickable-element:active) {
        filter: brightness(.98);
        scale: .99;
    }
    /**/

    /* Child element */
    .clickable-element {
        &::after {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            /* This makes text selectable but un-clickable: */
            /* z-index: -1; */
            touch-action: manipulation;
        }

        /* &:hover:not(:has(::after:hover)) {
            outline: solid 1px red !important;
        } */

        /* Any filters applied to this element will
             cause bugs: no click event + hover glitch */
        /* (You can filter the parent instead—see above) */
        & {
            filter: none !important; 
            transform: none !important; scale: none !important;
            translate: none !important; rotate: none !important;
        }
    }

}

/* Print button */
.dont-print, .button { @media print { display: none !important; } }
print-button:not(:defined) { 
    font-weight: bold;
    font-size: 85%; 
    line-height: 1.2; 
    background: #efefef; 
    border: solid 1px #00000060; 
    border-radius: 5px; 
    padding: 0.5lh 0.75lh;
    padding-inline-start: calc(1em + 0.75lh + 0.25lh);
    /* initial disabled styles */
    opacity: .5;
	filter: brightness(0.9);
    pointer-events: none;
}

/* Modal */
.modal {
    padding: 1lh;
    border-radius: 8px;
    transition: translate .6s var(--back-out);
    transition-behavior: allow-discrete;
    
    &::backdrop {
        backdrop-filter: brightness(.5);
        /* Needed for ::backdrop */
        /* transition: overlay .6s var(--back-out); */
        /* transition: all .3s var(--back-out); */
        /* transition-behavior: allow-discrete; */
    }

    @starting-style {
        translate: 0 1.5lh;
        &::backdrop {
            opacity: 0;
        }
    }

    h1, h2, h3, h4, h5, h6 {
        margin-block-start: 0;
    }
}