@function opacified-tint($tint, $opacity500) {
  $result: 255 - ((255 - $tint) * $opacity500 / 500);
  @if $result < 0 {
    $result: 0;
  }
  @return $result;
}

@function color($name, $opacity: normal, $alpha: 1) {
  $opacity_names: thick normal light bright pale translucent;
  $opacity_values: 850 500 250 135 67 18;
  $opacity500: 500;
  @for $i from 1 through min(length($opacity_names), length($opacity_values)) {
    @if nth($opacity_names, $i) == $opacity {
      $opacity500: nth($opacity_values, $i);
    }
  }
  $color_names: primary action important attention black white info;
  $color_reds: 0 97 255 255 0 255 3;
  $color_greens: 150 229 82 196 0 255 169;
  $color_blues: 136 218 82 0 0 255 244;
  $red: 0;
  $green: 0;
  $blue: 0;
  @for $i from 1 through length($color_names) {
    @if nth($color_names, $i) == $name {
      $red: nth($color_reds, $i);
      $green: nth($color_greens, $i);
      $blue: nth($color_blues, $i);
    }
  }

  @return rgba(opacified-tint($red, $opacity500), opacified-tint($green, $opacity500), opacified-tint($blue, $opacity500), $alpha);
}

%simple-input {
  background-color: transparent;
  border-style: none;
  padding-left: 0;
  font-size: 14px;

  &:focus {
    outline-color: transparent;
    outline-style: none;
  }
}

%complex-input {
  @extend %simple-input;
  border-radius: 5px;
  flex: 1;
  border: 2px solid transparent;
  box-shadow: 0 0 1px color(black, light);
  padding: .5em 1em;
  -webkit-transition: border 0.2s, box-shadow 0.2s;
          transition: border 0.2s, box-shadow 0.2s;

  &:focus {
    border-color: color(primary);
    box-shadow: 0 0 0 transparent;
  }
}

%pill {
  border-radius: 5px;
  padding: 3px 8px;
}

%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

%link {
  &:hover {
    cursor: pointer;
    opacity: 0.54;
  }

  &:active {
    opacity: 0.36;
  }
}

%link-disabled {
  &:hover {
    cursor: not-allowed;
    opacity: 1;
  }

  &:active {
    opacity: 1;
  }
}

%block {
  z-index: 0;
}

@mixin circle($radius) {
  width: $radius;
  height: $radius;
  border-radius: $radius;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

body {
  font-family: 'Roboto', sans-serif;
}

%card {
  border-radius: 2px;
  background-color: white;
  box-shadow: 0 1px 2px 1px color(black, bright);
  padding: 20px;
}

$card-width: 450px;