@editorFont: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
@maxZIndex: 2147483647;
@mono: Courier, monospace;


* {
  box-sizing: border-box;
}

[data-reactroot] {
  all: initial;
  font-family: @editorFont;
}

.open,
a {
  color: #ccc;
  text-decoration: underline;
  text-decoration-skip: ink;
  cursor: pointer;
}

.open:hover,
a:hover {
  color: #fff;
}

input {
  font-size: inherit;
  font-family: inherit;
  outline-color: white;
  text-overflow: ellipsis;
}

button {
  font-size: inherit;
  border: 0;
  border-radius: 0.1em;
  padding: 0.3em 0.8em;
  user-select: none;
  cursor: pointer;
  outline-color: white;
}

button.primary {
  background-color: hsl(206, 83%, 42%);
  color: white;
  outline-color: hsl(206, 83%, 42%);
}

button.small {
  font-size: .8em;
}

button.loading {
  position: relative;
  color: transparent;
  pointer-events: none;

  &:before,
  &:after {
    position: absolute;
    border-radius: 50%;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.55em;
    width: .7em;
    height: .7em;
  }

  &:before {
    border: .14em solid rgba(0,0,0,.15);
  }

  &:after {
    animation: spin .6s linear infinite;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: .14em;
    box-shadow: 0 0 0 1px transparent;
  }

}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



svg.invalid {
  color: hsl(0, 71%, 51%);
  transform: scale(1.5) translateY(-5%);
}

svg.valid {
  color: hsl(134, 70%, 43%);
  transform: scale(1.3) translateY(-10%);
}