@color-feature: #0afaca;
@color-background: #2c3e50;
@color-placeholder: #cbd6e2;
@color-modifier: rgb(251, 220, 59);
@color-special: #00eb79;
@color-input: #4a5767;

@dim-minimal: 400px;

// nb: does NOT include Arial: this causes Chrome 59? to not combine gender emoji properly
@fonts-normal: 'Lato', 'Helvetica Neue', 'Helvetica', sans-serif;

// nb: include Segoe for Windows, but _before_ Helvetica, which causes ZWJs not to work there.
@fonts-emoji: 'Lato', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Helvetica Neue', 'Helvetica', sans-serif;

// on Edge, we need to specify emoji fonts because Lato decides to "steal" rendering of number+cap.
@fonts-edge-emoji: 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

@button-width: 48px;
@button-width-small: 28px;

* {
  margin: 0;
  padding: 0;
}

*[hidden] {
  display: none !important;
}

html {
  background: @color-background;
  height: 100%;  // IE11 flexbox?
}

body {
  user-select: none;
  cursor: default;  // prevents "text" cursor
  box-sizing: border-box;
  padding: 1em;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  color: #b4bcc2;
  font-size: 38px;
  font-family: @fonts-normal;

  @media (max-height: @dim-minimal) {
    padding: 0.5em;
    padding-top: 0.125em;
    font-size: 28px;
  }
  @media (max-width: 600px) {
    padding: 0.25em;
  }
}

#blurb {
  font-family: 'Lato';
  font-weight: 700; // explicitly to preload Lato:700
  opacity: 0;
  position: absolute;
}

a {
  color: @color-feature;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
  &:focus {
    outline: none;
    color: @color-background;
    background: @color-feature;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    border-radius: 2px;
  }
}

h1 {
  padding-right: 12px;
  font-family: 'Lobster', 'Helvetica Neue', 'Helvetica', sans-serif;
  color: white;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  font-size: 1em;
}

.grow {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/** button */

button {
  font: inherit;
  font-family: @fonts-emoji;
  border-radius: 4px;
  border: 2px solid transparent;
  background: rgba(0, 0, 0, 0.25);
  padding: 0 8px;
  min-width: @button-width;
  font-size: 0.66em;
  line-height: 1.33em;
  cursor: pointer;
  color: white;
  letter-spacing: -1px;
  position: relative;
  display: inline-block;
  will-change: opacity;  /* force layer */
  overflow: hidden;

  @supports (-ms-ime-align:auto) {
    font-family: @fonts-edge-emoji;
  }

  &.unknown {
    display: none !important;
  }

  &:disabled {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
  }

  &:focus, &:active {
    outline: none;
    border-color: @color-feature;
  }

  .loader {
    opacity: 0;
  }
}
.ui {
  button {
    min-width: 2em;
    margin-right: 0;
    margin-left: 0.66em;
    font-size: 0.5em;
    line-height: 2em;
  }
}

/** header/footer */

footer {
  font-size: 16px;  // TODO(samthor): Ditch em units elsewhere since this contains 99%+ of text
  text-align: center;

  p {
    margin-top: 1em;
  }

  button {
    line-height: 2em;
    font-size: inherit;
    margin: 0 0.5ch;
  }

  section {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 1em 0;
    min-height: 5em;  // nb. this is just larger than the help stuff

    .line {
      width: 2px;
      background: rgba(0, 0, 0, 0.125);
      margin: 0 0.5em;
    }
  }

  .help {
    align-self: center;
    text-align: right;
    color: #CB6BAA;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    font-weight: 300;
    list-style: none;
    line-height: 1.5em;
    flex-grow: 1;
    margin: 0 0.5em;

    .help-desktop {
      display: none;
      @media (any-pointer: fine) {
        display: block;
      }
      @media (pointer: fine) {
        display: block;
      }
    }

    em {
      font-weight: 900;
      font-style: normal;
      text-transform: uppercase;
      font-size: 0.9em;
    }
    .small {
      font-weight: 900;
      font-style: normal;
      text-transform: uppercase;
      line-height: 1.5em;
      font-size: 0.75em;
    }
  }
  .rotate {
    text-align: left;
    color: @color-feature;
    h4 {
      font-size: 1.5em;
    }
    flex-grow: 2;
    position: relative;

    article {
      width: 100%;
      box-sizing: border-box;
      position: absolute;
      top: 0%;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-flow: column;
      transition: opacity 0.25s ease-in-out;
      will-change: opacity;
      padding: 0 0.5em;

      &:not(.active) {
        opacity: 0;
      }

      p {
        margin: 0;
      }
    }
  }
  .ib {
    display: inline-block;
  }

  @media (max-width: 768px) {
    .help, .line {
      display: none;
    }
    .rotate {
      text-align: center;
    }
  }
}
body.has-value footer {
  display: none;
}

body:not([data-install="pwa"]) #install-pwa {
  display: none;
}
body:not([data-install="windows"]) #install-windows {
  display: none;
}
body:not([data-install="ext"]) #install-ext {
  display: none;
}

header {
  display: flex;
  align-items: flex-end;
  padding: 0 12px 0.5em;

  #popout {
    a {
      display: block;
      height: 32px;
      width: 32px;
      line-height: 32px;
      font-size: 24px;
      text-align: center;
      text-decoration: none;
    }
  }
}
button#copy {
  width: 4.5em;
  padding: 0;

  &:not(.copied) {
    &:after {
      content: '↵';
      transform: translate(0, 3px);
      padding-left: 0.1ch;
      display: inline-block;
    }
  }
}
body:not(.has-value) button#copy {
  display: none;
}

/** loader */

@keyframes bob {
  from { transform: translateY(5px); }
  to   { transform: translateY(-5px); }
}

#loader {
  text-align: center;
  font-size: 0.5em;
  will-change: opacity;
  transition: opacity 0.5s;
  white-space: nowrap;
  min-width: 0px;  // we can shrink

  span {
    margin: 0 1px;
    display: inline-block;
    will-change: transform;
    &.face {
      vertical-align: sub;
      animation: bob 1s infinite alternate ease-in-out;
    }
    &.think {
      vertical-align: super;
      animation: bob 1s infinite alternate ease-in-out;
      animation-delay: -0.125s;
    }
  }

  &[hidden] {
    display: initial !important;
    opacity: 0;
  }
}

/** main .ui */

main {
  #input {
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: @color-input;

    // allows Safari border-radius to work with overflow
    -webkit-mask-image: -webkit-radial-gradient(white, black);

    .ui {
      pointer-events: none;
      display: flex;
      align-items: center;
      background: @color-input;
      z-index: 10;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        display: block;
        height: 100%;
        width: 32px;
        right: 100%;  // appear off right of .ui
        background: linear-gradient(to right, fadeout(@color-input, 100%), @color-input 100%);
      }
    }

    button#copy {
      pointer-events: auto;
      margin-left: 4px;
      margin-right: 14px;
    }
  }

  input, .sizer {
    font: inherit;
    font-family: @fonts-emoji;
    font-variant-ligatures: none;  // cursor can't go between ligatures
    font-size: 1em;
    // include padding on both sides, for IE11/Edge
    line-height: ~"calc(1.5em + 12px)";
    height: ~"calc(1.5em + 12px)";
    border: 0;

    @supports (-ms-ime-align:auto) {
      font-family: @fonts-edge-emoji;
    }
  }

  @indent: 15px;

  input {
    position: relative;  // place above underline
    background: transparent;
    width: 0;  // combined with flex-grow, this doesn't eat more space than it should
    flex-grow: 1;
    box-sizing: border-box;
    color: white;
    text-indent: @indent;

    // microsoft X button
    &::-ms-clear {
      display: none;
    }

    &:valid {
      padding-right: 32px;
    }

    // nb. disused, as Safari freaks the fuck out on type="search"
    &::-webkit-search-cancel-button {
      position: relative;
      right: 0px;
      color: white;
      cursor: pointer;

      &:active {
      }
    }

    @supports (-ms-ime-align:auto) {
      // For IE11/Edge, don't use text-indent: it's applied twice to the placeholder.
      text-indent: 0;
      padding-left: @indent;
      padding-right: @indent;
    }

    &::selection {
      background: transparent;
    }
    &::-moz-selection {
      /** firefox only */
      background: transparent;
    }
    &::placeholder {
      color: @color-placeholder;
      opacity: 0.33;
    }
    &::-ms-input-placeholder {
      color: @color-placeholder;
      opacity: 0.33;
    }
    @media (max-height: (@dim-minimal)) {
      &::placeholder {
        opacity: 0;
      }
      &::-ms-input-placeholder {
        opacity: 0;
      }
    }
    &:focus {
      outline: none;
    }
  }
  .sizer {
    background: red;  // should never be shown
    border-right: 0;
    padding-right: 0;
    display: inline-block;
    white-space: pre;

    .nonce {
      width: 10px;
      height: 100%;
      background: blue;
      display: inline-block;
    }
  }
  .autocomplete {
    position: absolute;
    visibility: visible;
    background: transparent;
    color: @color-placeholder;
    opacity: 0.33;
    margin-left: (-2px + @indent);
    padding: 0 2px;
  }

  .overflow-helper {
    width: 100%;
    overflow: hidden;
    visibility: hidden;
    position: absolute;
    border-radius: 12px;
  }

  input + .focus {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    border: 3px solid #606b79;
    opacity: 0;
    will-change: opacity;
    z-index: 11;
  }
  input:focus + .focus {
    opacity: 1;
  }

  .underline {
    visibility: visible;
    pointer-events: none;
    position: absolute;
    margin: 6px -1px;
    margin-left: (-2px + @indent);
    padding: 0 1px;
    height: 1.5em;
    // TODO(samthor): If we make this the actual color, we can 'hide' the autocomplete suggestion
    background: white;
    opacity: 0.125;
    will-change: transform;
    border-radius: 0.15em;

    &.loading {
      display: none !important;
    }
    &.range {
      padding: 0;
      margin: 10px 0;
      margin-left: @indent;
      height: ~"calc(1.5em - 8px)";  /* extra 4px margin, == 8px */
      border-radius: 0.05em;
      background: @color-feature;
      opacity: 0.75;
    }
  }
}

.chooser {
  line-height: 0;
  padding-top: 8px;
}
.options {
  padding-left: 8px;
  display: inline-block;
  // nb. hard to make inline, ::before and first option should sit together
  // this is basically impossible (without maybe more elements)
  // naïve approach: give before right margin, first option -ve margin, fails for 'huge' options

  &::before {
    content: attr(data-name);
    color: @color-feature;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    margin-right: 12px;
    font-size: 0.33em;
    line-height: 3em;
    font-weight: bold;
    vertical-align: middle;
  }
  &.modifier::before {
    color: @color-modifier;
  }
  &.special {
    display: block;

    &::before {
      color: @color-special;
    }
  }
  &:empty {
    display: none;
  }

  &.gone {
    opacity: 0.5;
  }

  button {
    padding-top: 1px;  /** offset emoji slightly lower */
    margin-bottom: 4px;
    margin-right: 4px;
  }
}

/** advanced */

section.advanced {
  margin: 1em;
  display: flex;
  justify-content: center;

  form {
    display: flex;
  }
  button:disabled {
    visibility: visible;
    opacity: 0.5;
  }
}

input.small {
  font: inherit;
  font-size: 0.5em;
  padding: 4px 0;
  line-height: 1.5em;
  text-indent: 9px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.125);
  box-sizing: border-box;
  color: @color-feature;
  opacity: 0.5;

  &::placeholder {
    color: @color-placeholder;
    opacity: 0.33;
  }
  &::-ms-input-placeholder {
    color: @color-placeholder;
    opacity: 0.33;
  }
  &:not(:placeholder-shown) {
    opacity: 1;  // FIXME: not supported in IE/Edge
  }
  &:focus {
    outline: none;
    border-color: @color-feature;
    opacity: 1;
  }
}

form.pending button .loader {
  opacity: 1;
}
form.pending button .text {
  opacity: 0;
}
form.pending button:disabled {
  opacity: 1 !important;
}

/** loader */

@keyframes loader {
  from { transform: scale(0.5); }
  to   { transform: scale(1); }
}
.text {
  will-change: opacity;
  transition: opacity 0.33s;
}
.statusicon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.5s;
  }
}
.failure .text {
  opacity: 0;
}
.success .text {
  opacity: 0;
}
.failure .statusicon::before {
  opacity: 1;
  content: '\1f61e';
}
.success .statusicon::before {
  opacity: 1;
  content: '\2705';
}
.loader {
  pointer-events: none;
  width: 0;
  height: 0;
  position: relative;
  left: 50%;
  top: -0.5em;
  font-size: 3em;
  will-change: opacity;
  transition: opacity 0.25s;

  &::after, &::before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0.33em;
    left: 0;
    opacity: 0.8;
    border-radius: 1000px;
    background: @color-feature;
    will-change: transform, opacity;
    animation: loader infinite 1s alternate ease-in-out;
  }
  &::before {
    margin-left: -0.75em;
    animation-delay: -1s;
  }
  &::after {
    margin-left: -0.25em;
  }
}

.extent {
  position: fixed;
  opacity: 0;
  user-select: auto;  // to catch select-all
  &::after {
    content: '\200b';  // zero-width space
  }
}

@media (min-height: (@dim-minimal + 1px)) {
  header {
    #popout {
      display: none;
    }
  }
}
@media (max-height: @dim-minimal) {
  @aside-height: 32px;
  body {
    max-height: 100vh;
    padding: 0;

    &:not(.has-value) {
      padding-bottom: @aside-height;
    }
  }
  footer, #advanced {
    display: none !important;
  }
  header {
    background: rgba(0, 0, 0, 0.125);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: @aside-height;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;

    h1 {
      font-size: 16px;
      text-shadow: none;
    }
  }
  body.has-value header {
    display: none;
  }

  #chooser {
    overflow: auto;
    padding: 4px 8px 0;

    .options::before {
      margin-right: 6px;
    }
    .options {
      padding-left: 0;
      padding-right: 4px;
      display: inline;
      &:empty {
        display: none;
      }
      button {
        min-width: @button-width-small;
        padding-left: 2px;
        padding-right: 0px;
        margin-bottom: 2px;
        margin-right: 2px;
      }
    }
  }
  main {
    #input, input + .focus {
      border-radius: 0;
    }
  }
}