@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;
  }
}