$color-fb: #3b5998;
$color-fb-gradient: #6077a6;

$color-vk: #4a76a8;
$color-vk-gradient: #0f65c6;

$color-tg: #61a8de;
$color-tg-gradient: #408ac2;

$color-max: #7147ee;
$color-max-gradient: #7147ee;

$color-skype: #00aff0;
$color-skype-gradient: #00d0e7;

$color-viber: #574e92;
$color-viber-gradient: #655bab;

$color-whatsapp: #25d366;
$color-whatsappb: #25d366;
$color-whatsapp-gradient: #2fc368;

@mixin shadow-on-hover() {
  transition: box-shadow 0.4s;

  &:hover {
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
  }
}

@mixin shadow-on-hover-gradient() {
  transition: box-shadow 0.4s;

  &:hover {
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
  }
}

@mixin set-channel-button-brand-color($color) {
  .tb-notification-button__inner > a {
    background-color: $color;
  }

  tb-notification-button__icon > svg path {
    fill: $color;
  }
}

@mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
  background: linear-gradient(
    309.02deg,
    $color -6.45%,
    $color-gradient 111.08%
  );
}

tb-notification-widget {
  #tb-notification-widget-inner.tb-notification-widget-inner {
    tb-notification-button a {
      cursor: pointer !important;
    }

    .tb-notification-button__tip {
      position: absolute;
      font-size: 10px;
      text-align: center;
      margin-top: 19px;
      left: 0;
      width: 100%;
      color: #6f7b8a;
    }

    .tb-btn-align-center {
      text-align: center;
    }

    .tb-btn-align-left {
      text-align: left;
    }

    .tb-btn-align-right {
      text-align: right;
    }
  }

  /* new design */

  #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-square {
    /* inline & popup */
    tb-notification-button {
      display: block;
      width: 100%;
      margin: 0px 0px 20px;
      padding: 0px;
      background-color: transparent;
      height: 30px;

      &[channel="skype"] {
        @include set-channel-button-brand-color($color-skype);
      }

      &[channel="facebook"] {
        @include set-channel-button-brand-color($color-fb);
      }

      &[channel="vk"] {
        @include set-channel-button-brand-color($color-vk);

        .tb-notification-button__inner > div {
          @include shadow-on-hover();
        }
      }

      &[authorized="true"] tb-notification-button__text[for="login"],
      &[authorized="false"] tb-notification-button__text[for="subscribe"] {
        display: none;
      }

      &[channel="viber"] {
        // @include set-channel-button-brand-color($color-viber);
        .tb-notification-button__inner > a {
          background-color: $color-viber;
        }
      }

      &[channel="tg"] {
        @include set-channel-button-brand-color($color-tg);
      }

      &[channel="max"] {
        .tb-notification-button__inner > a {
          background-color: $color-max;
        }
      }

      &[channel="whatsapp"] {
        .tb-notification-button__inner > a {
          background-color: $color-whatsapp;
        }
      }

      &[channel="whatsappb"] {
        .tb-notification-button__inner > a {
          background-color: $color-whatsappb;
        }
      }

      &[loading] {
        color: transparent;
        &:after {
          content: "";
          border-radius: 100%;
          border: 3px solid #fff;
          border-bottom-color: transparent;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 16px;
          height: 16px;
          margin: -11px 0 0 -11px;
          animation-name: spin;
          animation-duration: 1000ms;
          animation-iteration-count: infinite;
        }
      }

      .tb-notification-button__inner {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 219px;
        padding-left: 35px;
        float: initial;

        > a {
          all: initial;
          display: block;
          box-sizing: content-box;
          border-radius: 4px;
          cursor: pointer;
          color: #fff;
          position: relative;
          font-size: 12px;
          font-family: Arial, Helvetica, sans-serif;
          padding: 0px;
          line-height: 29px;
          height: 30px;
          text-align: center;
          text-decoration: none !important;
          &:hover {
            color: #fff;
          }

          @include shadow-on-hover();
        }

        tb-notification-button__text {
          display: inline-block;
          vertical-align: middle;
        }

        tb-notification-button__icon {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 30px;
          height: 30px;
          margin: 0px;
          > svg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  /* old design */
  #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-rounded {
    /* inline */
    tb-notification-button {
      @include shadow-on-hover();

      box-sizing: content-box;
      padding: 10px 20px;
      border-radius: 25px;
      cursor: pointer;
      background-color: #2979ff;
      color: #fff;
      display: inline-block;
      margin: 0 13px 45px 0;
      position: relative;

      &[channel="skype"] {
        background-color: $color-skype;
      }
      &[channel="facebook"] {
        background-color: $color-fb;
      }
      &[channel="vk"] {
        background-color: $color-vk;
      }
      &[authorized="true"] tb-notification-button__text[for="login"],
      &[authorized="false"] tb-notification-button__text[for="subscribe"] {
        display: none;
      }
      &[channel="viber"] {
        background-color: $color-viber;
      }
      &[channel="tg"] {
        background-color: $color-tg;
      }
      &[channel="max"] {
        background-color: $color-max;
      }
      &[channel="whatsapp"] {
        background-color: $color-whatsapp;
      }
      &[channel="whatsappb"] {
        background-color: $color-whatsappb;
      }
      &[loading] {
        color: transparent;
        &:after {
          content: "";
          border-radius: 100%;
          border: 3px solid #fff;
          border-bottom-color: transparent;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 16px;
          height: 16px;
          margin: -11px 0 0 -11px;
          animation-name: spin;
          animation-duration: 1000ms;
          animation-iteration-count: infinite;
        }
      }
      > a {
        all: initial;
        display: block;
        text-decoration: none;
        color: #fff;
        font-family: inherit;
        //font-size: 17px;
        margin: -10px -20px;
        //padding: 10px 20px;
        text-decoration: none !important;

        padding: 6px 30px 8px;
        min-width: 110px;
        text-align: center;
        font-size: 15px;

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

    tb-notification-button__text {
      display: inline-block;
      vertical-align: middle;
    }

    tb-notification-button__icon {
      display: inline-block;
      vertical-align: middle;
      //width: 40px;
      //height: 40px;
      width: 30px;
      height: 30px;
      margin: -10px 0 -10px -15px;
      > svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  &.tb-no-api-call
    #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-rounded
    tb-notification-button {
    margin-bottom: 13px;
  }

  /* popup */
  #tb-notification-widget-inner.tb-notification-widget-inner
    tb-notification-widget-overlay
    .tb-widget-buttons.tb-btn-style-rounded {
    tb-notification-button {
      display: inline-block;
      width: 120px;
      height: 24px;
      padding: 0px;
      margin: 0px 0px 18px 0px;

      > a {
        position: relative;
        text-align: center;
        font-size: 12px;
        padding: 5px 20px;
        margin: 0px;
      }
    }
    tb-notification-button__icon {
      display: block;
      position: absolute;
      left: 8px;
      top: 2px;
      width: 20px;
      height: 20px;
      margin: 0px;
      padding: 0px;
    }
    tb-notification-button__text {
      vertical-align: baseline;
      width: 60px;
      text-align: center;
      color: #fff;
    }
  }

  /* old design */
  #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-gradient {
    /* inline */
    tb-notification-button {
      @include shadow-on-hover-gradient();

      box-sizing: content-box;
      padding: 21px 36px;
      border-radius: 5px;
      cursor: pointer;
      background-color: #2979ff;
      color: #fff;
      display: inline-block;
      margin: 0 13px 45px 0;
      position: relative;

      &[channel="skype"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-skype,
          $color-skype-gradient
        );
      }
      &[channel="facebook"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-fb,
          $color-fb-gradient
        );
      }
      &[channel="vk"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-vk,
          $color-vk-gradient
        );
        padding: 19px 36px;
      }
      &[authorized="true"] tb-notification-button__text[for="login"],
      &[authorized="false"] tb-notification-button__text[for="subscribe"] {
        display: none;
      }
      &[channel="viber"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-viber,
          $color-viber-gradient
        );
      }
      &[channel="tg"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-tg,
          $color-tg-gradient
        );
      }
      &[channel="max"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-max,
          $color-max-gradient
        );
      }
      &[channel="whatsapp"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-whatsapp,
          $color-whatsapp-gradient
        );
      }
      &[channel="whatsappb"] {
        @include set-channel-button-brand-linear-gradient-color(
          $color-whatsappb,
          $color-whatsapp-gradient
        );
      }
      &[loading] {
        color: transparent;
        &:after {
          content: "";
          border-radius: 100%;
          border: 3px solid #fff;
          border-bottom-color: transparent;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 16px;
          height: 16px;
          margin: -11px 0 0 -11px;
          animation-name: spin;
          animation-duration: 1000ms;
          animation-iteration-count: infinite;
        }
      }
      > a {
        all: initial;
        display: block;
        text-decoration: none;
        color: #fff;
        font-family: inherit;
        //font-size: 17px;
        margin: -10px -20px;
        //padding: 10px 20px;
        text-decoration: none !important;

        padding: 6px 30px 8px;
        min-width: 110px;
        text-align: center;
        font-size: 15px;

        &:hover {
          color: #fff;
        }
      }

      &[channel="viber"] tb-notification-button__icon {
        > svg {
          width: 110%;
          height: 110%;
        }
      }
    }

    tb-notification-button__text {
      display: inline-block;
      vertical-align: middle;
    }

    tb-notification-button__icon {
      display: inline-block;
      vertical-align: middle;
      //width: 40px;
      //height: 40px;
      width: 30px;
      height: 30px;
      margin: -10px 0 -10px -15px;
      > svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  &.tb-no-api-call
    #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-gradient
    tb-notification-button {
    margin-bottom: 13px;
  }

  /* popup */
  #tb-notification-widget-inner.tb-notification-widget-inner
    tb-notification-widget-overlay
    .tb-widget-buttons.tb-btn-style-gradient {
    tb-notification-button {
      display: inline-block;
      width: 120px;
      height: 24px;
      padding: 0px;
      margin: 0px 0px 18px 0px;

      > a {
        position: relative;
        text-align: center;
        font-size: 12px;
        padding: 5px 20px;
        margin: 0px;
      }
    }
    tb-notification-button__icon {
      display: block;
      position: absolute;
      left: 8px;
      top: 2px;
      width: 20px;
      height: 20px;
      margin: 0px;
      padding: 0px;
    }
    tb-notification-button__text {
      vertical-align: baseline;
      width: 60px;
      text-align: center;
      color: #fff;
    }
  }

  /* circle icons design */
  #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-icons {
    /* inline */
    tb-notification-button {
      display: inline-block;
      position: relative;
      margin: 0px 13px 13px 0px;

      &:hover {
        cursor: pointer;
      }

      &[loading] {
        color: transparent;
        &:after {
          content: "";
          border-radius: 100%;
          border: 3px solid #fff;
          border-bottom-color: transparent;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 16px;
          height: 16px;
          margin: -11px 0 0 -11px;
          animation-name: spin;
          animation-duration: 1000ms;
          animation-iteration-count: infinite;
        }
      }
      > a {
        all: initial;
        display: block;
        text-decoration: none;
        font-family: inherit;
        text-decoration: none !important;

        min-width: 80px;
        text-align: center;
        font-size: 15px;
        color: #333;

        &:hover {
          cursor: pointer;
        }
      }

      &[channel="whatsappb"] tb-notification-button__icon,
      &[channel="whatsapp"] tb-notification-button__icon {
        background: $color-whatsapp;
      }

      &[channel="viber"] tb-notification-button__icon {
        background: $color-viber;
      }

      &[channel="tg"] tb-notification-button__icon {
        background: $color-tg;
      }

      &[channel="max"] tb-notification-button__icon {
        background: $color-max;
      }

      &[channel="facebook"] tb-notification-button__icon {
        background: $color-fb;
      }
    }

    tb-notification-button__text {
      display: block;
      margin-top: 4px;
    }

    tb-notification-button__icon {
      display: block;
      position: relative;
      width: 50px;
      height: 50px;
      margin: 0 auto;
      transition: all 0.3s ease;
      border-radius: 50%;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
      > svg {
        width: 100%;
        height: 100%;
      }

      &[channel="whatsappb"] svg {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 50%;
        height: 50%;
      }

      &:hover {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
      }
    }
  }
}

/*styles for non mobile*/
@media only screen and (min-device-width: 736px) {
  /* new design */

  #tb-notification-widget-inner.tb-notification-widget-inner
    .tb-widget-buttons.tb-btn-style-square {
    tb-notification-button {
      .tb-notification-button__inner {
        padding-left: 55px;
        width: 239px;

        tb-notification-button__icon {
          top: -5px;
          left: 0px;
          width: 40px;
          height: 40px;
        }
      }
    }
  }

  /* old design*/

  #tb-notification-widget-inner.tb-notification-widget-inner
    tb-notification-widget-overlay
    .tb-widget-buttons.tb-btn-style-rounded {
    tb-notification-button {
      margin: 0px 19px 24px 0px;
      width: 206px;
      height: 50px;

      > a {
        padding: 10px 20px;
        font-size: 20px;
      }
    }

    tb-notification-button__icon {
      width: 40px;
      height: 40px;
      left: 15px;
      top: 5px;
    }

    tb-notification-button__text {
      width: 100px;
      line-height: 30px;
    }
  }
}

// Dirty crutch. There is no other way now *'(
tb-notification-widget-popup.tb-popup-with-image
  .tb-widget-buttons
  > div:last-child {
  tb-notification-button {
    margin-bottom: 0 !important;
  }
}