.modal {
  background-color: white;

  border-style: solid;
  border-width: 1px;
  border-radius: var(--xsmall);
  box-shadow: 0 var(--xtiny) var(--xsmall) black;
  overflow: hidden;

  &.small {
    width: 500px;
  }

  &.medium-small {
    width: 650px;
  }

  &.medium {
    width: 850px;
  }

  &.large {
    width: 90%;
  }

  &.full-screen {
    width: 90vw;
    height: 90vh;

    #modal-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .modal__body {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      max-height: initial;
      min-height: initial;
    }
  }
}

.modal__header {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  position: sticky;
  top: 0;
  padding: var(--small) var(--medium);
  border-bottom-color: var(--darken-30-dark-vanilla);
  background-color: var(--eggshell-white);
}

.modal__title {
  display: flex;
  align-items: baseline;

  @extend .h3;
  .subheading {
    margin-left: var(--medium)
  }
}

.modal__body {
  padding: var(--large) var(--large) 0 var(--large);
  min-height: 250px;
  max-height: 80vh;
  overflow-y: scroll;
}

.modal__footer {
  border-top-color: var(--darken-30-dark-vanilla);
  border-top-style: solid;
  border-top-width: 1px;
  background-color: var(--eggshell-white);

  padding:var(--medium) var(--small);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: sticky;
  bottom: 0;
}

.modal__close {
  cursor: pointer;
  margin-left: auto;
}

.modal__cancel {
  margin-right: var(--tiny);
}

.modal.modal--dark {
  color: var(--lighten-13-taupe-grey);
  background-color: var(--grey-dark);
  border-color: var(--black);
  .modal__header {
    border-bottom-color: var(--black);
  }
  .modal__footer {
    border-top-color: var(--black);
    background-color: var(--grey-dark);
  }
  h3 {
    color: var(--darken-10-dark-vanilla);
  }
}

#modal__underlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  z-index: 900;
  background-color: rgba(0, 0, 0, 0.25) !important;

  &.fixed {
    align-items: start;
    padding-top: var(--xxlarge);
    padding-bottom: var(--xxlarge);
    .modal__body {
      max-height: -webkit-fill-available;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .modal {
    --background-color: rgb(34, 33, 33);
    --border-color: rgb(0, 0, 0);
  }

  #modal__underlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
  }
}