/* mixins */

@mixin gradient($from, $to) {
  background-color: $to;
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -ms-linear-gradient(top, $from, $to);
  background-image: -webkit-gradient(linear, 0 0, 0 100%,from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(top, $from, $to);
}

@mixin boxshadow($definition) {
  box-shadow: $definition;
  -webkit-box-shadow: $definition;
  -moz-box-shadow: $definition;
}

@mixin borderradius($radius: $border-radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

@mixin boxsizing($value) {
  box-sizing: $value;
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  -o-box-sizing: $value;
}

@mixin ul($style: 'default') {
  list-style: disc;
  padding-left: 2em;
  & li {
    display: list-item;
    margin-bottom: 1em;
  }
  @if $style == 'plain' {
    list-style: none;
    padding-left: 0;
  }
  @if $style == 'inline' {
    padding-left: 0;
    & li {
      display: inline;
    }
  }
}

@mixin linklist() {
  @include ul($style: 'inline');
  &:after {
    clear: both;
  }
  &:before, &:after {
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
  }
  & li a {
    @include tag();
  }
}

@mixin tag() {
  @include borderradius();
  display: block;
  float: left;
  background: $highlight-color-light;
  padding: 0 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}
