@randstad-design/orbit-multitheme/dist/assets/theme-randstad/bundles/popups.css

multitheme Front-end code based on Randstad Human Forward components

.modal--popup.modal--active {
  background: rgba(15, 25, 65, 0.3); }

.modal--popup .modal__dialog::before {
  display: none;
  -webkit-transition: none;
  transition: none; }

.modal--popup .modal__header {
  opacity: 1; }

.modal--popup .modal__footer {
  margin-top: -20px; }

@media (max-width: 940px) {
  .modal--popup {
    background: transparent;
    -webkit-transition: opacity 0.2s 0.3s, visibility 0s 0.5s;
    transition: opacity 0.2s 0.3s, visibility 0s 0.5s; }
    .modal--popup .modal__main {
      background: transparent;
      height: auto;
      max-height: calc(75vh - 60px);
      opacity: 1;
      padding-bottom: 120px; }
      .modal--popup .modal__main::after {
        display: none; }
      .modal--popup .modal__main--overflow {
        padding-bottom: 150px; }
    .modal--popup .modal__dialog, .modal--popup .modal__main, .modal--popup .modal__footer {
      -webkit-transform: translateY(100%);
      transform: translateY(100%); }
    .modal--popup .modal__main, .modal--popup .modal__footer {
      -webkit-transition: -webkit-transform 0s 0.5s;
      transition: -webkit-transform 0s 0.5s;
      transition: transform 0s 0.5s;
      transition: transform 0s 0.5s, -webkit-transform 0s 0.5s; }
    .modal--popup .modal__dialog {
      bottom: 0;
      height: auto;
      max-height: 75%;
      position: absolute;
      -webkit-transition: -webkit-transform 0.3s 0.2s;
      transition: -webkit-transform 0.3s 0.2s;
      transition: transform 0.3s 0.2s;
      transition: transform 0.3s 0.2s, -webkit-transform 0.3s 0.2s;
      width: 100%; }
    .modal--popup .modal__footer {
      margin-top: 0;
      opacity: 1;
      padding: 25px 30px; }
    .modal--popup.modal--active {
      -webkit-transition: opacity 0.2s;
      transition: opacity 0.2s; }
      .modal--popup.modal--active .modal__main, .modal--popup.modal--active .modal__dialog, .modal--popup.modal--active .modal__footer {
        -webkit-transform: translateY(0);
        transform: translateY(0); }
      .modal--popup.modal--active .modal__main, .modal--popup.modal--active .modal__footer {
        -webkit-transition: -webkit-transform 0.2s 0.3s;
        transition: -webkit-transform 0.2s 0.3s;
        transition: transform 0.2s 0.3s;
        transition: transform 0.2s 0.3s, -webkit-transform 0.2s 0.3s; }
  .modal--popup.poll .modal__main {
    padding-bottom: 90px; }
  .modal--popup.modal--active .modal__main {
    -webkit-transition-delay: inherit;
    transition-delay: inherit; }
    .modal--popup.modal--active .modal__main::after {
      -webkit-transition-delay: inherit;
      transition-delay: inherit; } }

@media (min-width: 941px) {
  .modal--popup .modal__header {
    padding-top: 30px; }
  .modal--popup .modal__dialog {
    width: 400px; }
  .modal--popup .modal__footer.divider {
    margin-top: 0;
    padding: 30px; }
  .modal--popup.modal--corner {
    bottom: 0;
    height: auto;
    padding: 0;
    right: 30px;
    top: auto;
    width: auto; }
    .modal--popup.modal--corner.modal--active {
      background: none; }
    .modal--popup.modal--corner .modal__dialog {
      border-bottom: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-style: solid;
      border-width: 1px;
      margin-top: 0;
      max-height: calc(100vh - 80px);
      border-color: var(--color-brand-tertiary-tint-80); }
      .bg-variant-brand-tertiary.modal--popup.modal--corner .modal__dialog {
        border-color: var(--color-gray-20); }
      .bg-variant-brand-white.modal--popup.modal--corner .modal__dialog {
        border-color: var(--color-gray-20); }
      .modal--popup.modal--corner .modal__dialog.bg-brand--white, .modal--popup.modal--corner .modal__dialog.bg-brand--off-white {
        border-color: #d7d7d7; }
  .modal--popup .poll {
    margin-bottom: 0; }
  .modal--popup .modal__main:not(.modal__main--overflow) .poll {
    margin-bottom: 30px; } }

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