
@import "~normalize.css/normalize";

::-webkit-scrollbar {
  width: $border-width;
}

::-webkit-scrollbar-thumb:vertical {
  background: $purple;
}

html, body {
  color: $dark;
  font-family: Proxima;
  font-size: $font-size;
  height: 100%;
  line-height: normal;
  background: white;

  @include lowRes() {
    font-size: $font-size-low-res;
  }
}

* {
  box-sizing: border-box;
  letter-spacing: $letter-spacing;
}

a {
  color: $purple;
  text-decoration: none;

  &:hover {
    color: $purple-hover;
  }

  &:focus {
    outline: none;
  }
}

.vue-flash-container {
  bottom: $space;
  position: absolute;
  right: $space;
  width: toRem(500px);
  z-index: 10000;
}

.flash__message {
  background: rgba($dark, .9) !important;
  border-radius: $border-radius;
  border: none;
  line-height: $copy-line-height;
  margin: 0;
  padding: $space-lg;
  word-wrap: break-word;


  .flash__close-button {
    display: none;
  }

  &.error {
    color: $red;
  }

  &.info {
    color: $purple;
  }

  &.success {
    color: $green;
  }

  &.warning {
    color: $orange;
  }

  & + .flash__message {
    margin-top: $space;
  }
}
