@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// Convert map to css properties
@mixin list-properties($group, $properties) {
  @each $name, $value in $properties {

    @if($name=='font') {
      font-family: $value;
    }
    @elseif($name=='size') {
      @include font-size($value);
    }
    @elseif($name=='color')
    {
      color: color($group, $value);
    }
    @elseif($name=='bg-color')
    {
      background-color: color($group, $value);
    }
    @elseif($name=='weight')
    {
      font-weight: weight($value);
    }
    @else {
      #{$name}: #{$value};
    }

  }
}

@mixin line-limit($line-clamp) {
  -webkit-line-clamp: $line-clamp;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box;
}

@mixin vertical-align() {
  display: block;
  position: relative;
  top: 50%;
  margin-top: -25%;
}


%sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

%clearfix {
  zoom: 1;
  &:before, &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}

%visually-hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}