feat: add toaster

src/widgets/offer-request/styles.module.scss

@@ -0,0 +1,129 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  gap: rem(20px);
+  padding: rem(25px) rem(20px);
+  border-radius: rem(28px);
+
+  @include iftablet {
+    padding: rem(30px);
+  }
+
+  @include iflaptop {
+    grid-template-rows: 1fr;
+    grid-template-columns: auto rem(400px);
+    padding: rem(40px);
+  }
+  @include ifdesktop {
+    grid-template-columns: auto rem(550px);
+    padding: rem(40px) rem(60px);
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .PanelLeft {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .PanelRight {
+    place-self: center center;
+
+    @include iftablet{
+      width: rem(400px);
+      place-self: end end;
+    }
+    @include iflaptop{
+      width: 100%;
+    }
+
+    .AdvPhoneInput{
+      display: none;
+      @include iftablet{
+        display: block;
+      }
+    }
+    .MobileBtns {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: rem(12px);
+      z-index: 2;
+      max-width: rem(400px);
+      @include iftablet{
+        display: none;
+      }
+    }
+  }
+
+
+  .SubTitle {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-light;
+    font-size: rem(22px);
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: rem(16px);
+
+    @include iftablet {
+      margin-bottom: rem(20px);
+    }
+
+    @include iflaptop {
+      font-size: rem(24px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(30px);
+      margin-bottom: rem(16px);
+    }
+  }
+
+  .Title {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(26px);
+    line-height: 130%;
+    color: $color-white;
+    max-width: rem(660px);
+    margin: 0;
+
+    @include iftablet {
+      font-size: rem(28px);
+    }
+
+    @include iflaptop {
+      font-size: rem(32px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(48px);
+    }
+  }
+}