$newsletter-bg: $brand-ctr !default;
$newsletter-color: $white !default;
$newsletter-icon-size: 25px !default;
$newsletter-form-bg: $white !default;
$newsletter-form-width: 480px !default;

.footer-newsletter {
   background: $newsletter-bg;
   white-space: nowrap;

   .newsletter-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 55px;
      padding-bottom: 55px;
   }

   p {
      color: $newsletter-color;
      line-height: $line-height-sm;
      margin-bottom: 0;
   }

   .insta-link {
      font-size: 24px;
      color: $white;
      text-decoration: unset;
   }

   .fc:not(.icons_check) {
      color: $newsletter-color;
      font-size: $newsletter-icon-size;
   }

   form {
      display: flex;
      margin-left: 55px;
      margin-right: 30px;
      max-width: $newsletter-form-width;
      width: 100%;
   }

   .btn,
   .form-control {
      background: $newsletter-form-bg;
      border: 0;
   }

   .form-control {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
   }

   .btn {
      @include btn-secondary;

      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      padding-left: 30px;
      padding-right: 30px;
      position: relative;
      white-space: nowrap;

      &::before {
         content: "";
         background: $border-color;
         display: block;
         width: 1px;
         height: 45px;
         position: absolute;
         left: 0;
         top: 50%;
         transform: translateY(-50%);
      }

      .fc {
         font-size: 21px;
         margin-right: 10px;
      }

      @include haf {
         background: $white;
         color: $brand-ctr;
      }
   }

   .social-links {
      flex-wrap: nowrap;
      margin-left: 30px;

      a {
         margin: 5px;
         transition: $transition-speed;

         @include haf {
            transform: scale(1.05, 1.05);
         }
      }
   }

   @media screen and (max-width: $xxl - 1) {
      .newsletter-wrapper {
         padding-left: 20px;
         padding-right: 20px;
      }
   }

   @media screen and (max-width: $lg - 1) {
      .newsletter-wrapper {
         flex-wrap: wrap;

         > div {
            margin-bottom: 15px;
         }
      }

      form {
         margin: 0 0 15px;
      }
   }

   @media screen and (max-width: $md - 1) {
      .newsletter-wrapper {
         padding: 30px 20px;
      }

      form {
         max-width: unset;
         width: 100%;
      }
   }

   @media screen and (max-width: $xs - 1) {
      .social-links {
         margin: 0;
         width: 100%;
      }
   }
}
