icon.less

.icon {
  display: inline-flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;

  &-outline {
    border-radius: 50%;
    background: #fff;
    padding: 5px;

    &--red {
      background: @color__red;
    }

    &--dark_green {
      background: @color__dark_green;
    }

    &--khaki {
      background: #D4D366;
    }
  }

  &-midi.icon-outline {
    height: 29px;
    width: 29px;
    padding: 0;
  }

  &--round {
    border-radius: 50%;
  }

  &--size {
    &_small {
      width: 32px;
      height: 32px;
      padding: 5px 4px;
    }
    &_big {
      padding: 4px;
      width: 37px;
      height: 37px;
      border-radius: 50%;
    }
  }

  .tag-type(@name, @color) {
    &--type {
      &_@{name} {
        border-color: @color;
        background-color: @color;
      }
    }
  }

  .tag-type(@name: ~"hashtag", @color: #689ACA);
  .tag-type(@name: ~"school", @color: #DC3457);
  .tag-type(@name: ~"geotag", @color: #47B8E7);

  &--inactive {
    border-color: #d0d0d0;
    background-color: #d0d0d0;
  }
}