@mixin rotate($deg) {
  -webkit-transform:rotate($deg * 1deg);
  -moz-transform:rotate($deg * 1deg);
  -ms-transform:rotate($deg * 1deg);
  -o-transform:rotate($deg * 1deg);
  transform:rotate($deg * 1deg);
}

.icon-base {
  display: block;
  width: 40px;
  height: 40px;
  &:after, &:before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    background: $positiveColor;
  }
  &:hover { &:after, &:before { opacity: .5; } }
}

.icon-plus { @extend .icon-base;
  &:before {
    left:19px;
    width:2px;
    height:20px;
    margin-top:-10px;

  }
  &:after {
    left:10px;
    width:20px;
    height:2px;
    margin-top:-1px;
  }
}

.icon-arrow-left { @extend .icon-base;
  &:after,
  &:before { left:8px; width:14px; height:2px; }

  &:before { margin-top: 4px; @include rotate(45); }
  &:after  { margin-top: -5px; @include rotate(-45); }
}

.icon-back {
  display: block;
  width: 40px;
  line-height: 42px;

  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    font-style: normal;
    position: relative;
    width: 12px;
    height: 20px;
    margin-top: -5px;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff'/></svg>");
  }
  &:hover { opacity: .5; }
}

.icon-folder { @extend .icon-base;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  right: 0;
  &:after,
  &:before { left:20px; width:10px; height:2px; background: $contrastColor; }

  &:before { margin-top: 2px; @include rotate(-45); }
  &:after  { margin-top: -4px; @include rotate(45); }
  &:hover { &:after, &:before { opacity: 1; } }
}

.icon-search {
  display: block;
  width: 40px;
  height: 40px;

  &:before {
    content:"";
    position:absolute;
    top: 11px;
    left: 10px;
    border: 1px solid $positiveColor;
    width: 14px;
    height: 14px;
    border-radius: 7px;
  }

  &:after {
    content:"";
    position:absolute;
    @include rotate(-43);
    width: 2px;
    height: 8px;
    left: 23px;
    top: 21px;
    background-color: $positiveColor;
  }

  &:hover { opacity: .5; }
}

.icon-reorder {
  position: absolute; width: 40px; height: 40px;
  cursor: pointer;
  &:before,
  &:after  { content: ''; width: 20px; height: 2px; left: 10px; display: block; position: absolute; background-color: $contrastColor; }
  &:before { top: 16px; }
  &:after  { top: 21px; }
}

.slip-reordering > .icon-reorder:before,
.slip-reordering > .icon-reorder:after { background-color: $positiveColor; }