/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
/** @define Modal */
.Modal {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-height: 90vh;
  margin: 5vh auto;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
  background: var(--colorsSurfaceDefault, white);
  border-radius: 6px;
  position: relative;
}
.Modal:focus {
  outline: none;
}
.Modal:focus-visible {
  outline: none;
}

.Modal--XS {
  max-width: 340px;
}

.Modal--S {
  max-width: 560px;
}

.Modal--M {
  max-width: 780px;
}

.Modal--L {
  max-width: 1100px;
}

.Modal__header,
.Modal__content,
.Modal__footer {
  background: var(--colorsSurfaceDefault, white);
  padding: 24px 32px;
}

.Modal__content:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.Modal__content:last-child {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.Modal__header,
.Modal__footer {
  display: flex;
  position: relative;
  flex: 0 0 auto;
}

.Modal__content {
  flex: 1 1 auto;
  position: relative;
}

.Modal__content--scrollable {
  overflow-y: auto;
}

.Modal__header {
  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.Modal__footer {
  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Modal__header-title {
  margin: 0;
  flex-grow: 1;
}

.Modal__header-close.Button {
  margin-right: -4px;
  margin-top: -1px;
  margin-bottom: -1px;
  opacity: 0.6;
}
.Modal__header-close.Button:hover {
  background-color: transparent;
}

.Modal__footer--center {
  justify-content: center;
}

.Modal__footer--left {
  justify-content: flex-start;
}

.Modal__footer--right {
  justify-content: flex-end;
}

.Modal__footer--space-between {
  justify-content: space-between;
}

/*# sourceMappingURL=Modal.css.map */