/*
 * Source Sans 3 – latin subset, self-hosted.
 * https://fonts.google.com/specimen/Source+Sans+3
 */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-italic.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Lumen theme for Bulma 1.0.
 * Adapted from https://github.com/jenil/bulmaswatch/tree/gh-pages/lumen
 */

:root {
  /* Primary: #158cba → hsl(197°, 80%, 41%) */
  --bulma-primary-h: 197deg;
  --bulma-primary-s: 80%;
  --bulma-primary-l: 41%;

  /* Link colour matches primary */
  --bulma-link-h: 197deg;
  --bulma-link-s: 80%;
  --bulma-link-l: 41%;

  --bulma-family-primary: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bulma-box-shadow: none;
}

/* Thick bottom border on boxes */
.box {
  border: 1px solid var(--bulma-border);
  border-bottom-width: 4px;
}

/* Uppercase bold buttons with thick bottom accent */
.button {
  --bulma-button-disabled-border-color: var(--bulma-button-border-color);
  --bulma-button-disabled-opacity: 1;
  --bulma-button-disabled-shadow: inset 0 -4px 0 var(--bulma-button-border-color);
  box-shadow: inset 0 -4px 0 var(--bulma-button-border-color);
  font-weight: bold;
  text-transform: uppercase;
  transition: all 300ms ease;

  &:not([disabled]):hover {
    box-shadow: inset 0 -3px 0 var(--bulma-button-border-color);
  }

  &[disabled],
  fieldset[disabled] & {
    color: var(--bulma-text-weak);
  }
}

/* Navbar with thick bottom border instead of shadow */
.navbar {
  border: 1px solid var(--bulma-border);
  border-bottom-width: 4px;
  box-shadow: none;
}

/* Card: no shadow, thick bottom border */
.card {
  border: 1px solid var(--bulma-border);
  border-bottom-width: 4px;
  box-shadow: none;

  .card-header {
    border-bottom: 1px solid var(--bulma-border);
    box-shadow: none;
  }
}

/* Notification and message with thick bottom border */
.notification {
  border: 1px solid var(--bulma-border);
  border-bottom-width: 4px;
}

.message {
  .message-body {
    border-bottom-width: 4px;
  }
}

/*
 * Customise/extend Bulma.
 */

body {
  margin-top: env(safe-area-inset-top);
  margin-right: env(safe-area-inset-right);
  margin-bottom: env(safe-area-inset-bottom);
  margin-left: env(safe-area-inset-left);
}

/*
 * Make inline SVGs behave like font icons inside Bulma's `.icon` container.
 */

.icon > svg {
  width: 1em;
  height: 1em;
}

/*
 * Rules relating to displaying rendered Markdown.
 */

div.footnote-definition {
  > sup.footnote-definition-label {
    float: left;
  }

  > p {
    padding-left: 1.5rem;
  }
}

/*
 * `MultiInput` styles, adapted from upstream stylesheet.
 * https://package.elm-lang.org/packages/larribas/elm-multi-input
 * https://larribas.me/elm-multi-input/styles/multi-input.css
 */

div.multi-input-container {
  background: transparent;
  overflow: hidden;
  padding: 0.2em 0;
}

ul.multi-input-list {
  overflow: hidden;
  cursor: text;
  margin: 0;
  padding: 0;
  background: transparent;
  width: 100%;

  li {
    list-style-type: none;
    max-width: 100%;
  }
}

.multi-input-delete-button {
  color: #aaa;
  margin-left: 0.45em;
  cursor: pointer;

  &:hover {
    color: grey;
  }

  &::after {
    content: "x";
    font-weight: bold;
    font-style: normal;
  }
}

li.multi-input-token {
  overflow: hidden;
  margin: 0.2em 0.1em;
  padding: 0.1em 0.5em;
  background-color: #dee7f8;
  cursor: default;
  border-radius: 0.5em;
  float: left;

  p {
    display: inline;
    padding: 0;
    margin: 0;
  }
}

li.multi-input-token-invalid {
  background-color: #ffd1d1;
}

li.multi-input-list-item {
  border: none;
  background: transparent;
  float: left;
  padding: 0;
  margin: 0;
}

.multi-input-expanding-area {
  --padding: 0.45rem 0.3em 0;
  position: relative;
  background: white;
  padding: var(--padding);

  > textarea,
  > pre {
    margin: 0;
    border: none;
    line-height: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: inherit;
    font-family: inherit;
  }

  > textarea {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    resize: none;
    outline: none;
    padding: var(--padding);
  }

  > pre {
    display: block;
    visibility: hidden;
    padding: 0 0.5rem;
  }
}

/*
 * Loading spinner.
 * From: https://loading.io/css/
 * Use with: <div class="lds-facebook"><div></div><div></div><div></div></div>
 */

.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;

  div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: var(--bulma-background);
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;

    &:nth-child(1) {
      left: 8px;
      animation-delay: -0.24s;
    }

    &:nth-child(2) {
      left: 32px;
      animation-delay: -0.12s;
    }

    &:nth-child(3) {
      left: 56px;
      animation-delay: 0;
    }
  }
}

@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}

/*
 * End.
 */