$namespace: 'intec-universe';
$component: 'sale-basket-icons';
$template: 'default';
$class: #{$component};

.ns-#{$namespace}.c-#{$component}.c-#{$component}-#{$template} {
  .#{$class}-items {}

  .#{$class}-item {
    display: block;
    color: #bebebf;
    text-decoration: none;

    -webkit-transition: 350ms;
    -moz-transition: 350ms;
    -ms-transition: 350ms;
    -o-transition: 350ms;
    transition: 350ms;

    -webkit-transition-property: color;
    -moz-transition-property: color;
    -ms-transition-property: color;
    -o-transition-property: color;
    transition-property: color;

    &-wrap {}

    &-wrapper {
      display: block;
      position: relative;
      text-align: center;
      width: 20px;
      height: 20px;
      line-height: 1;
      color: inherit;
    }

    &-icon {
      display: inline-block;
      vertical-align: top;
      font-size: 20px;
      color: inherit;
    }

    &-counter {
      display: block;
      position: absolute;
      top: -10px;
      right: -10px;
      line-height: 15px;
      width: 15px;
      height: 15px;
      font-size: 10px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      background: #0051cc;
      color: #fff;
      border: 2px solid #fff;
    }

    &.#{$class}-item-active {
      color: #0065ff;
    }
  }
}