/* 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 */

html {
    background-color: var(--color-bg);
    color: var(--color-text);
    accent-color: var(--color); /* currently chromium canary */
    font-family: var(--font);
    font-size: calc(13px + .7vmin);
    -webkit-hyphens: auto;
    hyphens: auto;
}
body {
    font-size:max(1rem, 16px);
}
a {
    color: var(--color);
    xtransition: color .2s; /* ff flickers on visited-color-change https://bugzilla.mozilla.org/show_bug.cgi?id=868975 */
}
a:visited {
    color: var(--color-text);
}
a:hover, a:focus {
    color: var(--color-text);
}
/*
a[download], a[target] {
    text-decoration: none;
}
a[target]:not([target="_self"])::after {
    content: '🠆';
    margin-left: .2em;
}
a[download]:not([target="sameSpecificityHack"])::after {
    content: ' 🠇'; /* 🠇⤵↓ */
    margin-left: .2em;
}
*/
hr {
    color: var(--color-light);
    margin: calc(var(--gap) * 2) 0;

    border-width:var(--line-width);
    border-color:var(--color-line);
}


/* future: *
:where(h1,h2,h3,h4,h5,h6,p,ul,ol):first-child {
  margin-top:0;
}
:where(h1,h2,h3,h4,h5,h6,p,ul,ol):last-child {
  margin-bottom:0;
}
/* */
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, ul:first-child, ol:first-child {
    margin-top:0;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child {
    margin-bottom:0;
}
/* */

table {
    width: 100%;
    font-size: max(.65em, 16px);
}
td, th {
    padding: .5em;
    padding: calc(var(--gap) / 2);
    border-style:solid;
    border-width:0 0 var(--line-width) 0;
    border-color:var(--color-line);

}

/* focus style */
:focus {
    outline: .4rem solid hsl(var(--hsl), .2);
    /* xoutline-offset:0; needed? */
    transition: .15s;
}
:focus:not(:focus-visible) { outline-width: 0; }

blockquote {
    margin: 0;
    padding: calc(var(--gap) / 2);
    padding-left: var(--gap);
    border-left: 5px solid var(--color);
    background-color: var(--color-light);
    border-radius: var(--radius);
}

pre {
    background-color: var(--color-light);
    padding: var(--gap);
    overflow-x: auto;
    border-radius: var(--radius);
}

code {
    font-size: 0.9em;
    padding: 0 0.5em;
    background-color: var(--color-light);
    white-space: pre-wrap;
    box-decoration-break: clone;
    line-height: 1;
}

mark {
    background-color: hsl(var(--hsl-h), 100%, 70%, 0.5);
    /*
    padding: 0 0.15em;  no padding as it can be some part of a word,
    maybe this? box-shadow: 0em 0em 0px 0.1em hsl(var(--hsl-h), 100%, 70%, 0.5) */
}

/* FORM */

/* all inputs, buttons */
input, textarea, select, button, ::file-selector-button, ::-webkit-file-upload-button, .btn {
    xbox-sizing: border-box;
    padding: .3em .4em;
    /* font-size: .9rem; */
    font-family: var(--font);
    max-width: 100%;
    /* todo: neu ok?*/
    /* xborder: 1px solid; */
    border-radius: var(--radius); /* remove? */
    /* 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 */

    border-width:var(--line-width);
    border-color:var(--color-line);

}


/* file-input */
[type=file] {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    border: none;
    background-color: var(--color-light);
}

input, select, textarea {
    background-color: var(--color-area2);
	border-color:transparent;
}
/* buttons */
button, ::file-selector-button, ::-webkit-file-upload-button, .btn {
    /* The selector is not invalidated although ::-webkit-file-upload-button in ff is not working. */
    transition: color .2s;
    background-color: var(--color);
    color: var(--color-bg);
    border-color: transparent;
    padding-left: 1em;
    padding-right: 1em;
    transition: background-color .1s;
}
/* buttons hover */
button:hover:not([disabled]), :hover::file-selector-button, :hover::-webkit-file-upload-button, .btn {
    background-color: var(--color-dark);
}
/* buttons disabled, todo all elements having disabled-attribute */
button[disabled] {
    opacity: .5;
}
/* file-buttons */
::file-selector-button, ::-webkit-file-upload-button, select[size], /* chrome */ select[multiple] {
    border-top-right-radius: 0;/* recheck: border-end-end-radius supported? (-safari) */
    border-bottom-right-radius: 0;
}

/* figure */
figure {
    xdisplay: flex;
    xjustify-content: center;
    xflex-direction: column;
    padding:0;
    margin: var(--gap);
    /* font-size: 1.2rem; */
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow:auto;
    xmargin:auto;
}

figure>img {
    border-radius: var(--radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

figure table {
    white-space: nowrap;
}

figcaption {
    opacity: .7;
    font-size: .9rem;
    font-style: italic;
    text-align: center;
}