/**
 * @file
 * Global CSS (unscoped styles).
 *
 * Complements the "critical" styles loaded inline in every page.
 * @see src/critical.css
 */

/* Default tags */

a:link,
a:visited {
	color: currentColor;
}
a:focus,
a:hover,
a.is-active {
	color: cornflowerblue;
}

.link {
	text-decoration: underline;
	text-decoration-thickness: .2em;
	text-underline-position: under;
}
.link:focus,
.link:hover,
.link.is-active {
	color: cornflowerblue;
}
.link.link--s {
	font-size: .8rem;
	text-decoration-thickness: .1em;
}

hr {
	border: 0;
	height: 1px;
	/* background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); */
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

h1,
h2,
h3 {
	margin: var(--space-l) 0 var(--space-xs) 0;
}

table {
	border-collapse: collapse;
	margin: 0 var(--space) var(--space) var(--space);
}
th,
td {
	padding: calc(var(--space-s) / 2);
	text-align: left;
}
td {
	border-top: 1px solid grey;
}
th {
	position: sticky;
	top: 0;
	color: #888;
	background-color: white;
	font-weight: normal;
}
.sort {
	display: flex;
	cursor: pointer;
}
.sort > span {
	padding-right: var(--space-s);
}
table .sort.is-off .is-asc,
table .sort.is-off .is-desc {
	display: none;
}
table .sort.is-asc .is-desc {
	display: none;
}
table .sort.is-desc .is-asc {
	display: none;
}
th.is-active {
	background-color: cornflowerblue;
	color: white;
	font-weight: bold;
}
th.is-active button {
	color: inherit;
}

blockquote {
	border-left: .2em solid #CFCFCF;
	margin-bottom: var(--space);
	padding-left: 1em;
	font-style: italic;
}

q {
	font-style: italic;
}

dl {
	display: grid;
	grid-template-columns: max-content auto;
}
dt {
	grid-column-start: 1;
	padding-right: var(--space-l);
	font-weight: bold;
}
dd {
	grid-column-start: 2;
}


/* Rich text styles */

/* .rich-text h1,
.rich-text h2,
.rich-text h3 {
	margin: var(--space-l) 0 0 0;
} */

.rich-text p,
.rich-text ul,
.rich-text ol {
	margin-bottom: var(--space);
}
.rich-text li {
	margin-left: var(--space-l);
}

.rich-text blockquote p {
	margin-bottom: 0;
}

.rich-text--inverse {
	color: white;
}
.rich-text--inverse a:focus,
.rich-text--inverse a:hover,
.rich-text--inverse a.is-active {
	color: var(--color-invert-link-on);
}


/* By default, all <button> without class appear like links. */

button {
	font-size: inherit;
	font-weight: inherit;
	background: none;
	cursor: pointer;
	font-family: inherit;
}
button:focus,
button:hover,
button.is-active {
	color: cornflowerblue;
}

/* button, */
.btn,
a.btn,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: var(--color-invert-bg);
  border: 1px solid var(--color-invert-bg);
  border-radius: var(--b-radius);
  color: white;
  cursor: pointer;
  display: inline-block;
	font-family: inherit;
  font-size: .7rem;
  font-weight: bold;
  /* height: 2rem; */
  /* letter-spacing: .1rem; */
	letter-spacing: .16ch;
  /* line-height: 2rem; */
  padding: var(--space) var(--space-l);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* button:focus, */
/* button:hover, */
.btn:focus,
.btn:hover,
.btn.is-active,
a.btn:focus,
a.btn:hover,
a.btn.is-active,
input[type='button']:focus,
input[type='button']:hover,
input[type='button'].is-active,
input[type='reset']:hover,
input[type='reset']:focus,
input[type='reset'].is-active,
input[type='submit']:focus,
input[type='submit']:hover,
input[type='submit'].is-active {
	background-color: cornflowerblue;
	border-color: cornflowerblue;
	color: white;
	outline: 0;
}

.input--s.input--s,
.btn.btn--s {
	border-radius: var(--b-radius-s);
	padding: var(--space-xs) var(--space-s);
}

.btn.btn--inverse {
	border-color: white;
	background-color: white;
	color: cornflowerblue;
}
.btn.btn--inverse:hover,
.btn.btn--inverse:focus {
	border-color: cornflowerblue;
	background-color: cornflowerblue;
	color: white;
}
.btn.btn--rounded,
.btn.btn--s.btn--rounded {
	position: relative;
	border: 0 none;
	background-color: transparent;
	color: inherit;
}
.btn.btn--s.btn--rounded {
	margin-left: var(--space-xs);
	padding: 0;
}
.btn.btn--rounded::before {
	content: '';
	position: absolute;
	z-index: -1;
	border: 1px solid #888;
	border-radius: 50%;
	top: -.5ch;
	left: -.5ch;
	width: 5ch;
	height: 5ch;
	background-color: white;
}
.btn.btn--rounded:hover::before,
.btn.btn--rounded:focus::before {
	background-color: #CFCFCF;
}
.btn.btn--s.btn--rounded::before {
	top: -.5ch;
	left: -.75ch;
	width: 2.75ch;
	height: 2.75ch;
}
/* .btn.btn--s.btn--rounded {
	display: inline-block;
	border: 1px solid #888;
	border-radius: 50%;
	width: 1ch;
	height: 1ch;
	vertical-align: middle;
	line-height: 0;
	background-color: white;
} */

input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
	-webkit-appearance: none;
  background-color: transparent;
  border: 1px solid cornflowerblue;
  border-radius: var(--b-radius);
  box-shadow: none;
	font-family: inherit;
  /* height: 3.8rem; */
  /* padding: .6rem 1.0rem .7rem; */
  padding: var(--space) var(--space-l);
  width: 100%;
}

input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
	border-color: var(--color-invert-link-on);
	outline: 0;
}

summary {
	cursor: pointer;
}
summary:focus,
summary:hover {
	color: cornflowerblue;
}
/* details[open] summary ~ * {
	animation: tr-sweep .25s ease-in-out;
}
@keyframes tr-sweep {
	0%    { opacity: 0; transform: translateX(-2rem); }
	100%  { opacity: 1; transform: translateX(0); }
} */


/* Special effects */

.fx-shadow {
	box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
}

.fx-ellipsis {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	max-width: var(--ellipsis-w, 20ch);
	text-overflow: ellipsis;
}


/* Misc utilities. */

.u-faux-small-caps {
	font-size: .7rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .16ch;
}

.u-center {
	text-align: center;
}
.u-fs-s {
	font-size: .8rem;
}
.u-m-b {
	margin-bottom: var(--space);
}
.u-m-t {
	margin-top: var(--space);
}


/* Global third-party components overrides */

/*
	TODO later :
	See https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md
*/
/* .selectContainer {
	--padding: var(--space) var(--space-l) !important;
} */