@import "../../theme.scss";

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc($default-padding + 12px);
  z-index: 99999;

  #modal-content {
    max-width: 560px;

    overflow-y: auto;
    .close-button {
      cursor: pointer;

      svg {
        width: 23px;
        height: auto;
      }
    }

    h3 {
      margin-top: 0;
    }

    .modal-content-container {
      max-height: calc(100vh - 160px);
      overflow-y: auto;

      &:hover {
        &::-webkit-scrollbar-thumb {
          background: #888888a7;
          border-radius: 6px;
        }
      }
    }

    .modal-content-container.show-border {
      border-block-end: 1px solid rgba(174, 174, 174, 0.1490196078);
    }
    #modal-footer {
      justify-content: end;
    }

    .modal-actionsWrapper {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 0.75rem;
      padding: 1.5rem;
    }
  }
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ffff;
  }
}