/* https://dev.to/5t3ph/my-top-css-tips-as-shared-on-twitter-part-1-23e2 */
/* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css */

@layer normalize {

html {
    background-color: var(--color-bg);
    color: var(--color-text);
    accent-color: var(--color);
    font-family: var(--font-1, system-ui, sans-serif);
    font-variation-settings: var(--font-1-variation);
}
a {
    color: var(--color);
    /* transition: color .2s; ff flickers on visited-color-change https://bugzilla.mozilla.org/show_bug.cgi?id=868975 */
}
a:visited {
    color: var(--color-dark);
}
a:hover, a:focus {
    color: var(--color-text);
}
hr {
    color: var(--color-line);
    margin-block: calc(var(--gap) * 2);
    border-width: var(--line-width);
}

h6,.h6 { font-size: calc(1rem * pow(1.24, -1)); }
h5,.h5 { font-size: calc(1rem * pow(1.24, 0)); }
h4,.h4 { font-size: calc(1rem * pow(1.24, 1)); }
h3,.h3 { font-size: calc(1rem * pow(1.24, 2)); }
h2,.h2 { font-size: calc(1rem * pow(1.24, 3)); }
h1,.h1 { font-size: calc(1rem * pow(1.24, 4)); }

/* margin-trim on the container may be a good alternative, only safari for now */
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,ul,ol,p):first-child { margin-top:0; }
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,ul,ol,p):last-child { margin-bottom:0; }

/* little margin betweet headings */
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) + :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { margin-top: 0; }
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):has(+ :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6)) { margin-bottom: .3em; }


table {
    inline-size: 100%;/* -webkit-fill-available; not working in firefox https://jsfiddle.net/1hkp6dfg/21/ */
    word-break: normal;
}
td,th {
    padding: calc(var(--gap) / 2);
}

dialog {
    background-color:var(--color-bg);
    color:var(--color-text);
}

mark {
    background-color: oklch(from var(--color-light) .9 .3 h / 0.8);
}


:focus-visible, u2-input:focus-within { /* how to prevent custom-elements to recive the outline they are focu and active if an inner element is focus and active */
    outline: .4rem solid hsl(from var(--accent) h s l / 0.2);
    transition: .15s;
}
:where(input,button,textarea,select,a,u2-input):active {
    outline: .55rem solid hsl(from var(--accent) h s l / 0.2);
    transition: .15s;
}

/* FORM */

fieldset {
    border: var(--line-width) solid currentColor;
    border-radius: var(--radius);
    padding: var(--gap);
    margin-inline: 0;
    margin-block: var(--gap);
    min-inline-size: 0; /* behave like normal block-elements */
}

input, textarea, select, button, .btn, u2-input {
    font-family:inherit;
    max-inline-size: 100%;
    padding-inline: var(--control-padding-x, .4em);
    padding-block: var(--control-padding-y, .3em);
    border-radius: var(--control-radius, var(--radius));
    border-width:var(--control-border-width);
    border-color:var(--color-line);
    /* min-height:1.3em; todo? for select, input same height in chrome, firefox has same height if they have borders? or line-height: 1.2;? line-height can not be set on select */
}


/* ::file-selector-button, ::-webkit-file-upload-button, select[size], / * chrome * / select[multiple] { */
select[size], /* chrome */ select[multiple] {
    border-top-right-radius: 0;/* recheck: border-end-end-radius supported? (-safari) */
    border-bottom-right-radius: 0;
    margin: 0;
    margin-inline-end: .5em;
}


}

/* outside layer */
button, .btn {
    background-color: var(--color);
    color: var(--color-bg);
    border-color: transparent;
    padding-inline: var(--gap);
    transition: background-color .15s; /* better every property? does not get along with focus-animation */
    transition-property: background-color, color, outline;
}

:is(button, .btn):not(:disabled):where(:hover, :focus, [aria-pressed="true"]) {
    background-color: var(--color-dark);
}