$white: #fff;
$black: #000;

$grey050: hsl(212, 60%, 97%);
$grey100: hsl(212, 50%, 93%);
$grey200: hsl(212, 30%, 85%);
$grey300: hsl(211, 13%, 65%);
$grey350: hsl(211, 11%, 59%);
$grey400: hsl(211, 10%, 53%);
$grey500: hsl(211, 12%, 43%);
$grey600: hsl(209, 14%, 37%);
$grey700: hsl(209, 18%, 30%);
$grey800: hsl(209, 20%, 25%);
$grey900: hsl(210, 24%, 16%);
$grey1000: hsl(210, 24%, 10%);

$blue050: #E3F8FF;
$blue100: #B3ECFF;
$blue200: #81DEFD;
$blue300: #5ED0FA;
$blue400: #40C3F7;
$blue500: #2BB0ED;
$blue600: #1992D4;
$blue700: #127FBF;
$blue800: #0B69A3;
$blue900: #035388;

$cyan050: #E0FCFF;
$cyan100: #BEF8FD;
$cyan200: #87EAF2;
$cyan300: #54D1DB;
$cyan400: #38BEC9;
$cyan500: #2CB1BC;
$cyan600: #14919B;
$cyan700: #0E7C86;
$cyan800: #0A6C74;
$cyan900: #044E54;

$pink050: #FFE3EC;
$pink100: #FFB8D2;
$pink200: #FF8CBA;
$pink300: #F364A2;
$pink400: #E8368F;
$pink500: #DA127D;
$pink600: #BC0A6F;
$pink700: #A30664;
$pink800: #870557;
$pink900: #620042;

$red050: #FFE3E3;
$red100: #FFBDBD;
$red200: #FF9B9B;
$red300: #F86A6A;
$red400: #EF4E4E;
$red500: #E12D39;
$red600: #CF1124;
$red700: #AB091E;
$red800: #8A041A;
$red900: #610316;

$yellow050: #FFFBEA;
$yellow100: #FFF3C4;
$yellow200: #FCE588;
$yellow300: #FADB5F;
$yellow400: #F7C948;
$yellow500: #F0B429;
$yellow600: #DE911D;
$yellow700: #CB6E17;
$yellow800: #B44D12;
$yellow900: #8D2B0B;

$teal050: #EFFCF6;
$teal100: #C6F7E2;
$teal200: #8EEDC7;
$teal300: #65D6AD;
$teal400: #3EBD93;
$teal500: #27AB83;
$teal600: #199473;
$teal700: #147D64;
$teal800: #0C6B58;
$teal900: #014D40;

// submit button colors
$primaryColor: #E5422B;
$secondaryColor: $grey350;

$inputColor: hsl(212, 25%, 50%);

// text colors
$textColor: $grey700;
$mediumDarkTextColor: $grey500;
$mediumTextColor: $grey400;
$lightTextColor: $grey300;
$linkColor: $blue800;

// hairline colors
$hairlineColor: transparentize($grey800, 0.9);
$mediumHairlineColor: transparentize($grey600, 0.75);
$darkHairlineColor: transparentize($grey400, 0.5);

// selection colors
$lightSelColor: $grey200;
$darkSelColor: $grey600;

// alert/notice colors
$errorColor: $red400;
$warningColor: $yellow700;
$successColor: $teal500;
$noticeColor: $blue700;

// UI element styles
$smallBorderRadius: 3px;
$mediumBorderRadius: 4px;
$largeBorderRadius: 5px;

$checkboxSize: 16px;

@mixin sans-serif-font {
  font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

@mixin fixed-width-font {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.9em !important;
}

// Other

@mixin svg-mask($color) {
  rect, circle, ellipse, line, polyline, polygon, path, text {
    fill: $color;
    stroke-width: 0;
    transition: fill linear 100ms;
  }
}

@mixin icon {
  font-family: 'Craft';
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr; // Fixes a rendering issue in Chrome/Win
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;

  opacity: 0.8;
}

@mixin clearafter {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@mixin shadow {
  box-shadow: 0 1px 5px -1px transparentize($grey900, 0.8);
}

@mixin pane {
  background: $white;
  box-shadow: 0 0 0 1px transparentize($grey200, 0.75), 0 2px 12px transparentize($grey200, 0.5);
}

@mixin modal {
  border-radius: $largeBorderRadius;
  background-color: $white;
  box-shadow: 0 25px 100px transparentize($grey900, 0.5);
}

@mixin light-on-dark-text() {
  // Make light on dark text sharp on Macs
  // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}

// RTL stuff

@mixin left($left) {
  body.ltr & {
    left: $left;
  }
  body.rtl & {
    right: $left;
  }
}

@mixin right($right) {
  body.ltr & {
    right: $right;
  }
  body.rtl & {
    left: $right;
  }
}

@mixin alignleft {
  body.ltr & {
    text-align: left;
  }
  body.rtl & {
    text-align: right;
  }
}

@mixin alignright {
  body.ltr & {
    text-align: right;
  }
  body.rtl & {
    text-align: left;
  }
}

@mixin border-left($params...) {
  body.ltr & {
    border-left: $params;
  }
  body.rtl & {
    border-right: $params;
  }
}

@mixin border-right($params...) {
  body.ltr & {
    border-right: $params;
  }
  body.rtl & {
    border-left: $params;
  }
}

@mixin border-left-width($param) {
  body.ltr & {
    border-left-width: $param;
  }
  body.rtl & {
    border-right-width: $param;
  }
}

@mixin border-right-width($param) {
  body.ltr & {
    border-right-width: $param;
  }
  body.rtl & {
    border-left-width: $param;
  }
}

@mixin border-radius($tl, $tr, $br, $bl) {
  body.ltr & {
    border-radius: $tl $tr $br $bl;
  }
  body.rtl & {
    border-radius: $tr $tl $bl $br;
  }
}

@mixin border-top-left-radius($params...) {
  body.ltr & {
    border-top-left-radius: $params;
  }
  body.rtl & {
    border-top-right-radius: $params;
  }
}

@mixin border-top-right-radius($params...) {
  body.ltr & {
    border-top-right-radius: $params;
  }
  body.rtl & {
    border-top-left-radius: $params;
  }
}

@mixin border-bottom-left-radius($params...) {
  body.ltr & {
    border-bottom-left-radius: $params;
  }
  body.rtl & {
    border-bottom-right-radius: $params;
  }
}

@mixin border-bottom-right-radius($params...) {
  body.ltr & {
    border-bottom-right-radius: $params;
  }
  body.rtl & {
    border-bottom-left-radius: $params;
  }
}

@mixin floatleft {
  body.ltr & {
    float: left;
  }
  body.rtl & {
    float: right;
  }
}

@mixin floatright {
  body.ltr & {
    float: right;
  }
  body.rtl & {
    float: left;
  }
}

@mixin margin($t, $r, $b, $l, $important: '') {
  body.ltr & {
    margin: $t $r $b $l unquote($important);
  }
  body.rtl & {
    margin: $t $l $b $r unquote($important);
  }
}

@mixin margin-left($margin...) {
  body.ltr & {
    margin-left: $margin;
  }
  body.rtl & {
    margin-right: $margin;
  }
}

@mixin margin-right($margin...) {
  body.ltr & {
    margin-right: $margin;
  }
  body.rtl & {
    margin-left: $margin;
  }
}

@mixin padding($t, $r, $b, $l, $important: '') {
  body.ltr & {
    padding: $t $r $b $l unquote($important);
  }
  body.rtl & {
    padding: $t $l $b $r unquote($important);
  }
}

@mixin padding-left($padding...) {
  body.ltr & {
    padding-left: $padding;
  }
  body.rtl & {
    padding-right: $padding;
  }
}

@mixin padding-right($padding...) {
  body.ltr & {
    padding-right: $padding;
  }
  body.rtl & {
    padding-left: $padding;
  }
}

// Misc

@mixin dark-inputs {
  @include placeholder-styles($grey400);

  .btn,
  .select:not(.selectize) select {
    background-color: $grey200;

    &:focus,
    &:hover {
      background-color: darken($grey200, 5%);
    }

    &:active,
    &.active {
      background-color: darken($grey200, 10%);
    }
  }

  .text {
    background-color: $grey200;

    &:focus {
      background-color: darken($grey200, 5%);
    }
  }
}

@mixin h6-styles {
  margin: 14px 0 3px;
  font-size: 10px;
  line-height: 1.2;
  color: $lightTextColor;
  text-transform: uppercase;
  font-weight: bold;
}

@mixin token-styles {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 14px;
  color: $textColor;
  background-color: transparentize($white, 0.5);
  box-shadow: 0 0 0 1px $darkHairlineColor;
}

@mixin menu-styles {
  z-index: 100;
  border-radius: $mediumBorderRadius;
  padding: 0 14px;
  overflow: auto;
  background: $white;
  user-select: none;
  box-shadow: 0 0 0 1px transparentize($grey900, 0.9), 0 5px 20px transparentize($grey900, 0.75);
}

@mixin menu-option-styles {
  margin: 0 -14px;
  padding: 10px 14px;
  color: $textColor;
  text-decoration: none;
  white-space: nowrap;
}

@mixin menu-option-active-styles {
  color: $textColor;
  background-color: $grey050;
}

@mixin input-styles {
  border-radius: $smallBorderRadius;
  border: 1px solid transparentize($inputColor, 0.75);
  background-color: hsl(212, 50%, 99%);
  box-shadow: inset 0 1px 4px -1px transparentize($inputColor, 0.75);
  background-clip: padding-box;
}

@mixin input-focused-styles {
  outline: none;
  border-color: transparentize($inputColor, 0.2);
}

@mixin placeholder-styles($color) {
  ::-webkit-input-placeholder {
    color: $color;
  }

  input:-ms-input-placeholder {
    color: $color;
  }

  ::-ms-input-placeholder {
    color: $color;
  }

  :-moz-placeholder {
    color: $color;
  }

  ::-moz-placeholder {
    color: $color;
  }

  ::placeholder {
    color: $color;
  }
}

@mixin select-styles {
  position: relative;
  border-radius: $largeBorderRadius;
  white-space: nowrap;
}

@mixin select-container-styles {
  position: relative;
  :not(.flex) > & {
    display: inline-block;
  }
}

@mixin select-arrow-styles {
  @include icon;
  position: absolute;
  z-index: 1;
  top: calc(50% - 5px);
  @include right(9px);
  font-size: 10px;
  content: 'downangle';
  user-select: none;
  pointer-events: none;
}

@mixin select-input-styles {
  display: block;
  position: relative;
  border: none;
  @include padding(7px, 22px, 7px, 10px);
  font-size: 14px;
  line-height: 20px;
  color: $textColor;
  background-color: transparentize($inputColor, 0.75);
  appearance: none;
  // from https://stackoverflow.com/a/15933790/1688568
  &::-ms-expand {
    display: none;
  }
}

@mixin select-input-fullwidth-styles {
  min-width: 100%;
}

@mixin select-input-focused-styles {
  outline: none;
  background-color: transparentize($inputColor, 0.5);
}

@mixin readable {
  font-size: 16px;
  line-height: 22px;

  h1, h2, h3, h4, h5, h6 {
    margin: 24px 0 16px;
    font-weight: 600;
  }

  h1 {
    font-size: 32px;
    line-height: 40px;
    color: #000;
  }

  h2 {
    font-size: 24px;
    line-height: 30px;
  }

  h3 {
    font-size: 20px;
    line-height: 24px;
  }

  h4 {
    font-size: 16px;
    line-height: 20px;
  }

  h5 {
    font-size: 14px;
    line-height: 18px;
  }

  h6 {
    font-size: 13.6px;
    line-height: 17px;
    color: $mediumTextColor;
  }

  ul,
  ol {
    margin: 1em 0;
    @include padding-left(2em);
  }

  ul li {
    list-style-type: disc;
  }

  li + li {
    margin-top: 0.25em;
  }

  blockquote {
    margin: 16px 0;

    &:not(.note) {
      padding: 0 16px;
      color: $mediumTextColor;
      @include border-left(4px solid $hairlineColor);
    }

    &.note {
      position: relative;
      border-radius: 4px;
      padding: 1em;
      @include padding-left(56px);
      border: 1px solid;

      &:not(.tip):not(.warning) {
        border-color: $errorColor;
        color: #bf503f;

        &:before {
          content: 'alert';
          color: $errorColor;
        }
      }

      &.tip {
        border-color: $linkColor;
        color: $mediumTextColor;

        &:before {
          content: 'lightbulb';
          color: $linkColor;
        }
      }

      &.warning {
        border-color: $warningColor;
        color: #cf783a;

        &:before {
          content: 'alert';
          color: $warningColor;
        }
      }

      &:before {
        @include icon;
        position: absolute;
        top: 12px;
        @include left(16px);
        font-size: 30px;
        width: 24px;
      }
    }
  }
}