@import '../../styles/common';
@import '../../styles/vendor/bootstrap_foundation-sites';

$m-modal__overlay-background: rgb(0 0 0 / 75%);

.m-modal {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background: $co-color__fg__back;

  &__content {
    padding: map_get($co-form__spacing, 'medium');
  }

  &__header {
    @include flex-grid-row($size: expanded);

    border-bottom: 1px solid $co-color__bg__back;
  }

  &__title {
    @include flex-grid-column(shrink);

    margin: 0;
    padding: map_get($co-form__spacing, 'small')
      map_get($co-form__spacing, 'medium');
    color: $co-color__fg__text--high;
    font-weight: 700;
  }

  &__close {
    @include flex-grid-size(shrink);

    margin-left: auto; // flew way to align right
    padding: 0 map_get($co-form__spacing, 'medium');
    background: none;

    &:hover {
      background: none;
    }
  }

  &__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $l-z-index__modal-overlay;
    background-color: $m-modal__overlay-background;
  }
}
