/* Classic Style
----------------------------------------------------------------------------- */

.shared-counts-wrap.style-classic {


  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;


  &.before_content {

    padding: 0;

  }

  .shared-counts-button {

    margin-right: 15px;

    &:last-child {
      margin-right: 0;
    }

    .shared-counts-icon-label {
      @include button-style();
      width: 28px;
      height: 28px;
      padding: 2px 4px;
      text-align: center;
      border-radius: 50px;
      background: var(--global--color-facebook);
      border-color: var(--global--color-facebook);

      .shared-counts-icon {


        svg {
          fill: var(--global--color-invert);
          width: 16px;
          height: 16px;

        }

      }

      &:hover {
        border-color: var(--global--color-facebook);


        .shared-counts-icon {

          svg {
            fill: var(--global--color-facebook);
          }

        }
      }
    }


    .shared-counts-label {

      display: none;

    }

    .shared-counts-count {
      font-size: 10px;
      padding: 2px 10px;
      background: var(--global--color-gray-base);
      border-radius: 20px;
      color: var(--global--color-text-base);
      transform: translate(2px, -13px);
      display: inline-block;
      line-height: 1;
    }

    /**
    Buttons variants
    */

    //facebook

    &.facebook_shares,
    &.facebook_likes,
    &.facebook {


    }

    &.linkedin {

      .shared-counts-icon-label {

        background-color: var(--global--color-linkedin);
        border-color: var(--global--color-linkedin);


        &:hover {

          background-color: var(--global--color-invert);


          .shared-counts-icon {

            svg {
              fill: var(--global--color-linkedin);
            }

          }
        }
      }

    }

    &.pinterest {

      .shared-counts-icon-label {

        background-color: var(--global--color-pinterest);
        border-color: var(--global--color-pinterest);


        &:hover {

          background-color: var(--global--color-invert);

          .shared-counts-icon {

            svg {
              fill: var(--global--color-pinterest);
            }

          }
        }
      }


    }

    &.twitter {

      .shared-counts-icon-label {

        background-color: var(--global--color-twitter);
        border-color: var(--global--color-twitter);


        &:hover {

          background-color: var(--global--color-invert);


          .shared-counts-icon {

            svg {
              fill: var(--global--color-twitter);
            }

          }
        }
      }


    }

  }
}