/*
  filename: layout.css
  CSS styles that are used by RetroTxt but should not be used in options.html.
*/

/* Bulma-like classes and values */
:root {
  --has-text-primary: hsl(171, 100%, 41%);
  --has-text-link: hsl(217, 71%, 53%);
  --has-text-info: hsl(204, 86%, 53%);
  --has-text-success: hsl(141, 71%, 48%);
  --has-text-warning: hsl(48, 100%, 67%);
  --has-text-danger: hsl(348, 100%, 61%);
  --has-text-danger-dark: hsl(348, 86%, 43%);

  --has-text-black-ter: hsl(0, 0%, 14%);
  --has-text-grey-dark: hsl(0, 0%, 29%);
  --has-text-grey-lighter: hsl(0, 0%, 86%);
  --has-text-white-ter: hsl(0, 0%, 96%);
  --has-text-white-bis: hsl(0, 0%, 98%);

  --header-font-family: ibmplexmono;
}

.is-hidden {
  display: none;
}

.has-text-primary {
  color: var(--has-text-primary);
}
.has-text-link {
  color: var(--has-text-link);
}
.has-text-info {
  color: var(--has-text-info);
}
.has-text-success {
  color: var(--has-text-success);
}
.has-text-warning {
  color: var(--has-text-warning);
}
.has-text-danger {
  color: var(--has-text-danger);
}

.has-text-grey-dark {
  color: var(--has-text-grey-dark);
}

.has-left {
  margin: initial;
  justify-content: left;
}
.has-center {
  margin: auto;
  justify-content: center;
}
.has-text-weight-normal {
  font-weight: normal;
}
.has-text-underline {
  text-decoration: underline;
}
.has-text-strike {
  text-decoration: line-through;
}

.is-size-2 {
  line-height: 1.1;
}
.is-size-3 {
  line-height: 1.25;
}
.is-size-4 {
  line-height: 1.5;
}
.is-size-5 {
  line-height: 1.75;
}
.is-size-6 {
  line-height: 2;
}
.is-size-7 {
  line-height: 3;
}
.is-size-8 {
  line-height: 4;
}

.is-font-2 {
  font-size: 110%;
}
.is-font-3 {
  font-size: 125%;
}
.is-font-4 {
  font-size: 150%;
}
.is-font-5 {
  font-size: 175%;
}
.is-font-6 {
  font-size: 200%;
}
.is-font-7 {
  font-size: 300%;
}
.is-font-8 {
  font-size: 400%;
}

.has-text-plain-with-container {
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 60em;
}

/*
  use flexbox for our layout to stack HTML items
  apply a work-around fix for Chrome browser's vertical line, font artefacts
*/
body {
  display: flex;
  flex-direction: column;
  text-shadow: none;
}

/* information header */

header {
  background-color: black;
  border-radius: 0.25rem;
  color: var(--has-text-grey-lighter);
  display: block;
  font-family: var(--header-font-family);
  font-size: 1em;
  line-height: 1.6em;
  order: 1;
  text-align: left;
  text-indent: 1em;
  width: 100%;
  z-index: 1;
  position: sticky;
  top: 0em;
}

header hr {
  border: 0;
  border-top: 1px solid var(--has-text-grey-dark);
  width: 98%;
}

header strong {
  cursor: pointer;
  user-select: none;
}

header#headerMinimal {
  border-radius: 0.25rem;
  margin: 0;
  padding: 0;
  width: 3rem;
}

header > #toggleDown {
  color: var(--has-text-danger);
}

header > #toggleUp {
  color: var(--has-text-info);
}

header #fontnameInUse {
  font-size: 1em;
}

header strong#colorPaletteToggle,
header strong#renderToggle,
header strong#sizeToggle,
header strong#documentEncoding {
  color: var(--has-text-info);
}

header a:link,
header a:visited,
header a:hover,
header a:active {
  color: var(--has-text-info);
}

header #sauce00Data {
  color: var(--has-text-white-ter);
}

header #SAUCE00-comment {
  font-style: italic;
  margin-left: 1em;
  text-indent: 0;
  white-space: pre-wrap;
}

/* article containing retrotxt */

article {
  display: flex;
  justify-content: center;
}

article > pre {
  display: inline-block;
  letter-spacing: 0;
  min-width: 640px;
  order: 2;
}

article > pre b {
  font-style: normal;
  font-weight: normal;
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 1px 0 1px currentColor;
}

article > pre i {
  font-style: normal;
  font-weight: normal;
}

article > #styledDocument a:link,
article > #styledDocument a:visited,
article > #styledDocument a:hover,
article > #styledDocument a:active {
  color: inherit;
}

/* pre, contains both the raw text and the retrotxt container */

pre {
  padding: 0;
  /* override the Firefox default value `pre-wrap` that breaks wide ANSI art */
  white-space: pre;
}

body > div#displayAlert {
  background-color: var(--has-text-danger-dark);
  border: 0.15rem solid var(--has-text-black-ter);
  color: var(--has-text-white-bis);
  font-family: var(--header-font-family);
  padding: 1rem;
  position: absolute;
  top: 30%;
  margin-left: 15%;
  margin-right: 15%;
}

body > div#displayAlert a:link,
body > div#displayAlert a:visited,
body > div#displayAlert a:hover,
body > div#displayAlert a:active {
  color: var(--has-text-white-bis);
}

body > div#displayAlert kbd {
  /* source: https://github.com/auth0/kbd */
  background: rgb(238, 238, 238);
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgb(119, 119, 119);
  color: rgb(85, 85, 85);
  cursor: pointer;
  display: inline-block;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 2px;
  padding: 0 4px;
  vertical-align: text-bottom;
}
