@festo-ui/web-essentials 8.2.0-dev.630 → 8.2.0-dev.637

package/scss/_misc.scss

@@ -1,51 +1,51 @@
-.fwe-object-fit-contain {
-  object-fit: contain !important;
-}
-
-.fwe-object-fit-cover {
-  object-fit: cover !important;
-}
-
-.fwe-object-fit-fill {
-  object-fit: fill !important;
-}
-
-.fwe-object-fit-scale-down {
-  object-fit: scale-down !important;
-}
-
-.fwe-w-100 {
-  width: 100% !important;
-}
-
-.fwe-h-100 {
-  height: 100% !important;
-}
-
-.fwe-text-align-center {
-  text-align: center;
-}
-
-.fwe-text-align-right {
-  text-align: right;
-}
-
-.fwe-text-align-left {
-  text-align: left;
-}
-
-.fwe-text-align-justify {
-  text-align: justify;
-}
-
-.fwe-text-align-end {
-  text-align: end;
-}
-
-.fwe-text-align-start {
-  text-align: start;
-}
-
-.fwe-cursor-pointer {
-  cursor: pointer;
-}
+.fwe-object-fit-contain {
+  object-fit: contain !important;
+}
+
+.fwe-object-fit-cover {
+  object-fit: cover !important;
+}
+
+.fwe-object-fit-fill {
+  object-fit: fill !important;
+}
+
+.fwe-object-fit-scale-down {
+  object-fit: scale-down !important;
+}
+
+.fwe-w-100 {
+  width: 100% !important;
+}
+
+.fwe-h-100 {
+  height: 100% !important;
+}
+
+.fwe-text-align-center {
+  text-align: center;
+}
+
+.fwe-text-align-right {
+  text-align: right;
+}
+
+.fwe-text-align-left {
+  text-align: left;
+}
+
+.fwe-text-align-justify {
+  text-align: justify;
+}
+
+.fwe-text-align-end {
+  text-align: end;
+}
+
+.fwe-text-align-start {
+  text-align: start;
+}
+
+.fwe-cursor-pointer {
+  cursor: pointer;
+}

package/scss/_mixins.scss

@@ -1,51 +1,51 @@
-@use "variables";
-
-@mixin firefox-only {
-  @at-root {
-    @-moz-document url-prefix() {
-      & {
-        @content;
-      }
-    }
-  }
-}
-
-/* a screen reader friendly approach */
-@mixin visual-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  clip-path: inset(50%);
-  border: 0;
-}
-
-@mixin custom-scrollbar {
-  @-moz-document url-prefix() {
-    scrollbar-width: thin;
-    scrollbar-color: variables.$control-scrollbar transparent;
-  }
-  @media (pointer: fine) {
-    &::-webkit-scrollbar {
-      width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      overflow: visible;
-      background-color: variables.$control-scrollbar;
-      // use $gray-100 with opacity 0 for effect of margins of scrollbar
-      border: 3px solid rgba(242, 243, 245, 0);
-      // hide the background with background clip
-      -webkit-background-clip: padding-box;
-      background-clip: padding-box;
-      border-radius: 8px;
-    }
-  }
-}
+@use "variables";
+
+@mixin firefox-only {
+  @at-root {
+    @-moz-document url-prefix() {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+/* a screen reader friendly approach */
+@mixin visual-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+@mixin custom-scrollbar {
+  @-moz-document url-prefix() {
+    scrollbar-width: thin;
+    scrollbar-color: variables.$control-scrollbar transparent;
+  }
+  @media (pointer: fine) {
+    &::-webkit-scrollbar {
+      width: 14px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      overflow: visible;
+      background-color: variables.$control-scrollbar;
+      // use $gray-100 with opacity 0 for effect of margins of scrollbar
+      border: 3px solid rgba(242, 243, 245, 0);
+      // hide the background with background clip
+      -webkit-background-clip: padding-box;
+      background-clip: padding-box;
+      border-radius: 8px;
+    }
+  }
+}

package/scss/_modal.scss

@@ -1,233 +1,233 @@
-@use "mixins";
-@use "variables";
-
-.fwe-modal {
-  padding: variables.$spacer-xl;
-  z-index: variables.$zindex-modal;
-  background-color: variables.$white;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  position: relative;
-  width: 92vw;
-  max-width: 550px;
-  max-height: 92vh;
-  outline: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .fwe-modal-body {
-    overflow-x: hidden;
-    overflow-y: auto;
-    @include mixins.custom-scrollbar;
-  }
-
-  &-h1 {
-    margin-top: 0;
-    margin-bottom: variables.$spacer-l;
-    margin-right: variables.$spacer-l;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &-h2 {
-    margin-top: 0;
-    margin-bottom: variables.$spacer-xs;
-    margin-right: variables.$spacer-l;
-    font-size: variables.$font-size-md;
-    line-height: 18px;
-    font-weight: variables.$font-weight-bold;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: relative;
-  }
-
-  &-close-btn {
-    position: absolute;
-    top: variables.$spacer-l;
-    right: variables.$spacer-l;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border: none;
-    min-width: 32px;
-    cursor: pointer;
-    background: variables.$text;
-    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
-    &:hover {
-      background: variables.$hero;
-    }
-  }
-
-  &-header {
-    flex-shrink: 0;
-  }
-
-  &-body {
-    flex-shrink: 1;
-    flex-grow: 1;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    margin-bottom: variables.$spacer-l;
-    p:first-child {
-      margin-top: 0;
-    }
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &-buttons {
-    flex-shrink: 0;
-    display: grid;
-    grid-column-gap: variables.$spacer-xs;
-    grid-auto-flow: column;
-    grid-auto-columns: minmax(0, 1fr);
-  }
-
-  &--with-indicator-bar {
-    border-left: 8px solid variables.$hero;
-
-    &.fwe-modal--warning,
-    &.fwe-modal--error {
-      button.fwe-btn.fwe-btn-link {
-        color: variables.$text;
-      }
-    }
-  }
-
-  &--info,
-  &--warning,
-  &--error {
-    .fwe-modal-h2 {
-      padding-left: 24px;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 0px;
-        top: 1px;
-        height: 16px;
-        width: 16px;
-      }
-    }
-
-    @media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
-      .fwe-modal-h1 {
-        padding-left: 32px;
-        position: relative;
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0px;
-          top: 4px;
-          height: 24px;
-          width: 24px;
-        }
-      }
-    }
-  }
-
-  &--info {
-    .fwe-modal-h2::before {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTggMWE3IDcgMCAxIDAgNyA3IDcgNyAwIDAgMC03LTdabTEgMTJIN1Y3aDJabTAtOEg3VjNoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
-    }
-
-    .fwe-modal-h1::before {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
-    }
-  }
-
-  &--warning {
-    border-color: variables.$orange;
-    .fwe-modal-h2::before {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTE1LjIxNiAxMy41MyA4Ljg4MiAxLjY1M2ExIDEgMCAwIDAtMS43NjQgMEwuNzg0IDEzLjUzQTEgMSAwIDAgMCAxLjY2NyAxNWgxMi42NjZhMSAxIDAgMCAwIC44ODMtMS40N1pNOSAxM0g3di0yaDJabTAtM0g3VjVoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
-    }
-
-    .fwe-modal-h1::before {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
-    }
-  }
-
-  &--error {
-    border-color: variables.$red;
-    .fwe-modal-h2::before {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTggMS4wODFhNi45NiA2Ljk2IDAgMSAwIDYuOTYgNi45NkE2Ljk2IDYuOTYgMCAwIDAgOCAxLjA4Wm0yLjM5NyA5Ljk3MUw3Ljk1OCA4LjYxM2wtMi4zNTUgMi4zNTYtLjYzNy0uNjM3IDIuMzU2LTIuMzU1LTIuMjI4LTIuMjI4LjYzNi0uNjM3TDcuOTU4IDcuMzRsMi4zMTEtMi4zMTEuNjM3LjYzNy0yLjMxMSAyLjMxMSAyLjQzOSAyLjQzOFoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
-    }
-
-    .fwe-modal-h1::before {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
-    }
-  }
-
-  &--large {
-    max-width: 912px;
-    min-width: 375px;
-    .fwe-modal-buttons {
-      justify-content: end;
-      grid-auto-columns: minmax(200px, auto);
-    }
-  }
-}
-
-@keyframes fwe-modal-backdrop-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fwe-modal-backdrop {
-  position: fixed;
-  background-color: variables.$background-modal;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: variables.$zindex-modal-backdrop;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fwe-modal-backdrop-fade-in 0.3s ease-out;
-}
-
-@media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
-  .fwe-modal {
-    // always use block buttons on this width
-    padding: variables.$spacer-m;
-    &-buttons {
-      justify-content: unset !important;
-      grid-auto-columns: minmax(0, 1fr) !important;
-    }
-
-    &-close-btn {
-      top: variables.$spacer-xs;
-      right: variables.$spacer-xs;
-    }
-
-    &-h1 {
-      font-size: variables.$font-size-xl;
-      line-height: variables.$spacer-l;
-      margin-top: 0;
-      margin-bottom: variables.$spacer-m;
-      margin-right: variables.$spacer-s;
-    }
-
-    &-h2 {
-      @include mixins.visual-hidden();
-    }
-
-    &-body {
-      margin-bottom: variables.$spacer-m;
-    }
-  }
-}
-
-@media (max-width: 375px) {
-  .fwe-modal--large {
-    width: unset;
-    min-width: unset;
-  }
-}
+@use "mixins";
+@use "variables";
+
+.fwe-modal {
+  padding: variables.$spacer-xl;
+  z-index: variables.$zindex-modal;
+  background-color: variables.$white;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  position: relative;
+  width: 92vw;
+  max-width: 550px;
+  max-height: 92vh;
+  outline: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .fwe-modal-body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    @include mixins.custom-scrollbar;
+  }
+
+  &-h1 {
+    margin-top: 0;
+    margin-bottom: variables.$spacer-l;
+    margin-right: variables.$spacer-l;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-h2 {
+    margin-top: 0;
+    margin-bottom: variables.$spacer-xs;
+    margin-right: variables.$spacer-l;
+    font-size: variables.$font-size-md;
+    line-height: 18px;
+    font-weight: variables.$font-weight-bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+  }
+
+  &-close-btn {
+    position: absolute;
+    top: variables.$spacer-l;
+    right: variables.$spacer-l;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    min-width: 32px;
+    cursor: pointer;
+    background: variables.$text;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
+    &:hover {
+      background: variables.$hero;
+    }
+  }
+
+  &-header {
+    flex-shrink: 0;
+  }
+
+  &-body {
+    flex-shrink: 1;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    margin-bottom: variables.$spacer-l;
+    p:first-child {
+      margin-top: 0;
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &-buttons {
+    flex-shrink: 0;
+    display: grid;
+    grid-column-gap: variables.$spacer-xs;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
+  &--with-indicator-bar {
+    border-left: 8px solid variables.$hero;
+
+    &.fwe-modal--warning,
+    &.fwe-modal--error {
+      button.fwe-btn.fwe-btn-link {
+        color: variables.$text;
+      }
+    }
+  }
+
+  &--info,
+  &--warning,
+  &--error {
+    .fwe-modal-h2 {
+      padding-left: 24px;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0px;
+        top: 1px;
+        height: 16px;
+        width: 16px;
+      }
+    }
+
+    @media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
+      .fwe-modal-h1 {
+        padding-left: 32px;
+        position: relative;
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0px;
+          top: 4px;
+          height: 24px;
+          width: 24px;
+        }
+      }
+    }
+  }
+
+  &--info {
+    .fwe-modal-h2::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTggMWE3IDcgMCAxIDAgNyA3IDcgNyAwIDAgMC03LTdabTEgMTJIN1Y3aDJabTAtOEg3VjNoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+    }
+
+    .fwe-modal-h1::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
+    }
+  }
+
+  &--warning {
+    border-color: variables.$orange;
+    .fwe-modal-h2::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTE1LjIxNiAxMy41MyA4Ljg4MiAxLjY1M2ExIDEgMCAwIDAtMS43NjQgMEwuNzg0IDEzLjUzQTEgMSAwIDAgMCAxLjY2NyAxNWgxMi42NjZhMSAxIDAgMCAwIC44ODMtMS40N1pNOSAxM0g3di0yaDJabTAtM0g3VjVoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+    }
+
+    .fwe-modal-h1::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
+    }
+  }
+
+  &--error {
+    border-color: variables.$red;
+    .fwe-modal-h2::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTggMS4wODFhNi45NiA2Ljk2IDAgMSAwIDYuOTYgNi45NkE2Ljk2IDYuOTYgMCAwIDAgOCAxLjA4Wm0yLjM5NyA5Ljk3MUw3Ljk1OCA4LjYxM2wtMi4zNTUgMi4zNTYtLjYzNy0uNjM3IDIuMzU2LTIuMzU1LTIuMjI4LTIuMjI4LjYzNi0uNjM3TDcuOTU4IDcuMzRsMi4zMTEtMi4zMTEuNjM3LjYzNy0yLjMxMSAyLjMxMSAyLjQzOSAyLjQzOFoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+    }
+
+    .fwe-modal-h1::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
+    }
+  }
+
+  &--large {
+    max-width: 912px;
+    min-width: 375px;
+    .fwe-modal-buttons {
+      justify-content: end;
+      grid-auto-columns: minmax(200px, auto);
+    }
+  }
+}
+
+@keyframes fwe-modal-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fwe-modal-backdrop {
+  position: fixed;
+  background-color: variables.$background-modal;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: variables.$zindex-modal-backdrop;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fwe-modal-backdrop-fade-in 0.3s ease-out;
+}
+
+@media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
+  .fwe-modal {
+    // always use block buttons on this width
+    padding: variables.$spacer-m;
+    &-buttons {
+      justify-content: unset !important;
+      grid-auto-columns: minmax(0, 1fr) !important;
+    }
+
+    &-close-btn {
+      top: variables.$spacer-xs;
+      right: variables.$spacer-xs;
+    }
+
+    &-h1 {
+      font-size: variables.$font-size-xl;
+      line-height: variables.$spacer-l;
+      margin-top: 0;
+      margin-bottom: variables.$spacer-m;
+      margin-right: variables.$spacer-s;
+    }
+
+    &-h2 {
+      @include mixins.visual-hidden();
+    }
+
+    &-body {
+      margin-bottom: variables.$spacer-m;
+    }
+  }
+}
+
+@media (max-width: 375px) {
+  .fwe-modal--large {
+    width: unset;
+    min-width: unset;
+  }
+}