@import 'themes/default';

.Modal__Wrapper {
  align-items: center;
  background-color: var(--Modal__Wrapper____bg-color);
  bottom: 0;
  content: '';
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  margin: 0;
  outline: none;
  opacity: 1;
  overflow-y: auto;
  padding: var(--Modal__Wrapper____padding);
  position: fixed;
  right: 0;
  top: 0;
  transition-duration: var(--timing--fade);
  transition-property: background-color, opacity;
  visibility: visible;
  width: 100%;

  &--hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
  }
}

.Modal {
  --focus--offset: var(--focus--width);

  background-color: var(--color--invert);
  border-radius: var(--radius--huge);
  box-shadow: var(--shadow--m);
  margin-top: auto !important;
  margin-bottom: auto !important;
  max-width: var(--Modal____max-width);
  transform: translateY(0);
  transition: transform var(--timing--rotate);
  width: 100%;

  &--hidden {
    transform: translateY(-1.428em);
  }
}