@mixin arrow-before($width, $height, $top, $left) {
  content: '';
  position: absolute;
  width: $width;
  height: $height;
  border-radius: 50px;
  background-color: var(--ff-mini-modal-border);
  top: $top;
  left: $left;
}
.ff-mini-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}
.ff-mini-edit-modal-container {
  width: fit-content;
  padding: 0;
  position: absolute;
  visibility: hidden;
  &.modalVisible {
    visibility: visible;
  }
  &.animatedModal {
    animation: slideDown 0.5s ease, opacity 0.5s ease;
  }

  .popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 102;
    &.popover-arrow-top {
      bottom: 100%;
      left: 30px;
      padding: 0 3px 0 0;
      border-color: transparent transparent var(--ff-mini-modal-border)
        transparent;
      filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));
      &::before {
        @include arrow-before(3px, 4px, -0.5px, 0);
      }
    }
    &.popover-arrow-left {
      left: -15px; //align the arrow with modal for the right side modal
      border-color: transparent var(--ff-mini-modal-border) transparent
        transparent;
      filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
      padding: 3px 1px 0 0;
      &::before {
        @include arrow-before(4px, 3px, 0, 0);
      }
    }
    &.popover-arrow-bottom {
      top: 100%;
      left: 30px;
      border-color: var(--ff-mini-modal-border) transparent transparent
        transparent; // Bottom part of the arrow with the correct color
      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
      padding: 0 3px 0 0;
      &::before {
        @include arrow-before(3px, 3px, -2px, 0);
      }
    }
    &.popover-arrow-right {
      top: 66px;
      border-color: transparent transparent transparent
        var(--ff-mini-modal-border);
      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
      padding: 3px 1px 0 0;
      &::before {
        @include arrow-before(3px, 3px, 0, -2px);
      }
    }

    &.left-top-arrow {
      top: 10%;
    }
    &.left-middle-arrow {
      top: 45%;
    }
  }
  .wrapped-div {
    outline-offset: -8px;
    position: absolute;
    border-radius: 7px 7px 0 0;

    &::before,
    &::after {
      position: absolute;
      content: '';
      width: 13px;
      height: 13px;
      background: transparent;
      border-radius: 50%;
      bottom: 0;
      box-shadow: 8px 4px 0 var(--ff-mini-modal-border);
    }
    &::before {
      left: -13px;
      clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);
    }
    &::after {
      right: -13px;
      clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);
      box-shadow: -8px 4px 0 var(--ff-mini-modal-border);
    }
  }
  .mini-edit-modal {
    background: var(--ff-mini-modal-border);
    position: relative;
    max-height: fit-content;
    width: 100%;
    margin: 0 0 0 -5px;
    height: 100%;

    &.mini-edit-modal-wrapper-shadow {
      box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
    }
    &.mini-edit-modal-arrow-shadow {
      box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);
    }
    header {
      border-radius: 4px 4px 0 0;
    }
    footer {
      border-radius: 0 0 4px 4px;
    }
    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      background-color: var(--ff-mini-modal-footer-background);
      height: 24px;
      padding: 0 10px 0 0;
      transition: transform 0.3s ease-in-out;
    }
  }

  @keyframes slideDown {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
.ff-mini-modal-buttons-flex {
  display: flex;
}
.ff-mini-modal-gap-10 {
  gap: 10px;
}
.ff-mini-edit-model-icon {
  color: var(--ff-mini-modal-box-shadow);
  border: 2px solid var(--ff-mini-modal-box-shadow);
  border-radius: 4px;
}
.ff-mini-modal-loop {
  display: flex;
  flex-wrap: wrap;
}
.ff-mini-modal-loop-div {
  width: 500px;
  height: 300px;
}