@import "variables.less";
@import "../buttons/flat/gradient.css";

.make-network-style(@color, @hover) {
  background-color: @color;

  &:hover {
    background-color: @hover;
  }

  &.sharer-flat-4 {
    border-color: @color;

    &:hover {
      color: @color;
      background-color: #fff;
    }
  }
}

.@{base-selector} {
  .sharer-flat {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;

    &.pricon {
      margin-top: 35px;
    }

    &.sharer-flat-1 {
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
    }

    &.sharer-flat-2 {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }

    &.sharer-flat-3 {
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
    }

    &.sharer-flat-4 {
      border: 2px solid #000;

      &:hover {
        background: #fff;
        color: #000;
      }
    }

    &.sharer-flat-5 {
      -webkit-border-top-left-radius: 50%;
      -webkit-border-bottom-right-radius: 50%;
      -moz-border-radius-topleft: 50%;
      -moz-border-radius-bottomright: 50%;
      border-top-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }

    &.sharer-flat-6,
    &.sharer-flat-7,
    &.sharer-flat-8,
    &.sharer-flat-9 {
      width: 7em;
      text-align: center;
      margin-bottom: 5px;
    }

    &.sharer-flat-7,
    &.sharer-flat-9 {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
    }

    &.sharer-flat-8,
    &.sharer-flat-9 {
      i {
        width: 100%;
        span {
          margin-left: 5px;
        }
      }
    }

    &.twitter { .make-network-style(#83c3f3, darken(#83c3f3, 10%)); }
    &.livejournal { .make-network-style(rgb(43, 87, 128), darken(rgb(43, 87, 128), 10%)) }
    &.facebook { .make-network-style(#3b5998, darken(#3b5998, 10%)) }
    &.googleplus { .make-network-style(#dd4b39, darken(#dd4b39, 10%)) }
    &.vk { .make-network-style(#45668e, darken(#45668e, 10%)) }
    &.like { .make-network-style(#9b59b6, darken(#9b59b6, 10%)) }
    &.reddit { .make-network-style(#cee3f8, darken(#cee3f8, 10%)) }
    &.pinterest { .make-network-style(#cc2127, darken(#cc2127, 10%)) }
    &.digg { .make-network-style(#000000, lighten(#000000, 10%)) }
    &.stumbleupon { .make-network-style(#eb4924, darken(#eb4924, 10%)) }
    &.delicious { .make-network-style(#3399ff, darken(#3399ff, 10%)) }
    &.odnoklassniki { .make-network-style(#ed812b, darken(#ed812b, 10%)) }
    &.linkedin { .make-network-style(#0077b5, darken(#0077b5, 10%)) }
    &.print { .make-network-style(rgb(18, 36, 53), darken(rgb(18, 36, 53), 10%)) }
    &.bookmark { .make-network-style(#ef7053, darken(#ef7053, 10%)) }
    &.mail { .make-network-style(#ed4926, darken(#ed4926, 10%)) }
    &.evernote { .make-network-style(#6ba92f, darken(#6ba92f, 10%)) }
  }

  &[data-change-size="on"] {
    .sharer-flat-6,
    .sharer-flat-7,
    .sharer-flat-8,
    .sharer-flat-9 {
      &:hover {
        width: 6em;
      }
    }
  }

  &[data-overlay="on"] {
    .twitter { .make-network-style(#83c3f3, darken(#83c3f3, 30%)); }
    .livejournal { .make-network-style(rgb(43, 87, 128), darken(rgb(43, 87, 128), 30%)) }
    .facebook { .make-network-style(#3b5998, darken(#3b5998, 30%)) }
    .googleplus { .make-network-style(#dd4b39, darken(#dd4b39, 30%)) }
    .vk { .make-network-style(#45668e, darken(#45668e, 30%)) }
    .like { .make-network-style(#9b59b6, darken(#9b59b6, 30%)) }
    .reddit { .make-network-style(#cee3f8, darken(#cee3f8, 30%)) }
    .pinterest { .make-network-style(#cc2127, darken(#cc2127, 30%)) }
    .digg { .make-network-style(#000000, lighten(#000000, 30%)) }
    .stumbleupon { .make-network-style(#eb4924, darken(#eb4924, 30%)) }
    .delicious { .make-network-style(#3399ff, darken(#3399ff, 30%)) }
    .odnoklassniki { .make-network-style(#ed812b, darken(#ed812b, 30%)) }
    .linkedin { .make-network-style(#0077b5, darken(#0077b5, 30%)) }
    .print { .make-network-style(rgb(18, 36, 53), darken(rgb(18, 36, 53), 30%)) }
    .bookmark { .make-network-style(#ef7053, darken(#ef7053, 30%)) }
    .mail { .make-network-style(#ed4926, darken(#ed4926, 30%)) }
    .evernote { .make-network-style(#6ba92f, darken(#6ba92f, 30%)) }
  }
}