@import "public-booking/main_dependencies";

// This class renders dialog window in such a way that there is a scroll bar for a page but the page in the background
// cannot be scrolled.
// When dialog content is big enough proper scroll bar appears that allows us to scroll dialog window.
&.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;

  padding-right: 0 !important;

  // Solution for visible scrollbar for the body.
  overflow-y: scroll;
}

&#bb {
  .modal {
    overflow-y: auto;

    .modal-header {
      background-color: $bb-modal-header-bg-color;
      padding: $bb-modal-padding-vertical $bb-modal-padding-horizontal;
      height: 2 * $bb-modal-padding-vertical + 22px;

      .modal-title {
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
      }

      .close {
        display: inline-block;
        color: black;
        border: none;

        margin-top: -5px;
        padding: 0;

        &:focus, &:active {
          border: none;
          box-shadow: none;
        }
      }

    }

    .modal-body {
      padding: $bb-modal-padding-horizontal;
    }

    .modal-content {
      border-radius: $bb-base-border-radius;
    }

    .modal-footer {
      padding: $bb-modal-padding-vertical $bb-modal-padding-horizontal;
      button + button {
        margin-left: 10px;
      }
    }
  }
}