@use '~styles/global.scss' as *;

.container {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  position: fixed;
  z-index: 1000;

  background-color: rgba(33, 0, 93, 0.161);
  inset: 0;
}

.modalContent {
  min-width: 45rem;
  max-width: 60rem;
  max-height: 60rem;

  overflow: auto;

  display: flex;
  flex-direction: column;

  background-color: $primaryWhite;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 12px;

  ::-webkit-scrollbar {
    width: 0.4rem;

    padding: 0 4px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: $secondaryGray;
    border-radius: 10rem;
  }

  ::-webkit-scrollbar-track {
    background-color: $primaryWhite;
  }
}

.modalHeader {
  width: 100%;

  display: flex;

  justify-content: space-between;

  font-size: 2.2rem;

  padding: 2.4rem 3.2rem;

  background-color: $primaryWhite;

  h2 {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 2.8rem;

    margin: 0;
  }
}

.modalContentText {
  color: $tertiaryGray;

  padding: 4rem 1rem 2.4rem;
}

.modalFooter {
  width: 100%;

  display: flex;
  gap: 0.8rem;

  place-items: center;

  padding: 1.6rem 3.2rem;
}

.headerButtons {
  display: flex;
  gap: 1.6rem;
}
