/*to use global variables, import them into your component stylesheet*/
@import "./../../../styles/global.scss";

$space: 1rem;

.modal__container > * {
    box-sizing: border-box;
}

.modal__container {
    display: flex;
    flex-direction: column;
}

.modal__title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal__exit-button {
    background: transparent;
    border: none;
    justify-self: flex-end;
}

.modal__title-text {
    margin: 0;
}

.modal__content-container {
    margin: 0 0 1rem 0;
}

.modal__content-container > p {
    text-align: left;
}

// shamelessly stolen from here: https://every-layout.dev/layouts/switcher/
.modal__buttons-container {
    display: flex;
    flex-wrap: wrap;
}

.modal__buttons-container > * {
    display: flex;
    flex-wrap: wrap;
    margin: calc(#{$space / 2} * -1);
  }
  
  .modal__buttons-container > * > * {
    flex-grow: 1;
    flex-basis: calc((0 - calc(100% - #{$space})) * 999);
    margin: calc(#{$space / 2});
    display: flex;
    justify-content: center;
  }
  
  .modal__buttons-container > * > :nth-last-child(n+4),
  .modal__buttons-container > * > :nth-last-child(n+4) ~ * {
    flex-basis: 100%;
  }



@media (min-width: 480px) {
    .modal__container {
        max-width: 24rem;
    }

    .modal__buttons-container > * > * {
        justify-content: flex-start;
      }
   }