@import "../../../../src/style/abstracts/all";
:local(.modalOverlay) {
  position: fixed;
  padding-bottom: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background-color: rgba(33, 33, 33, 0.48);
  z-index: 3;
  @include transition(all .2s .4s);
  &:local(.fullscreen){
    background-color: #FFFFFF;
    @include box-shadow(0 6px 10px 0 rgba(0, 0, 0, 0.3));
    z-index: 2;
    padding-top: 48px;
    @media (min-width: $screen-sm) {
      background-color: rgba(33, 33, 33, 0.48);
      @include box-shadow(none);
      z-index: 3;
      padding-top: 0;
    }
    :local(.modal) {
      margin: 0;
      max-height: 100%;
      @include border-radius(0);
      @media (min-width: $screen-sm) {
        margin: 40px auto;
        @include calc(max-height, '100% - 80px');
        @include border-radius(2px);

      }

    }
  }
  &.active {
    display: block;
  }
  :local(.modal) {
    overflow: auto;
    padding: 15px;
    margin: 40px auto;
    @include calc(max-height, '100% - 80px');
    overflow: visible;

    @media (min-width: $screen-sm) {
      max-width: 900px;
    }
    &:local(.scrollable){
      height: 100%;
      :local(.modalContainer){
        :local(.modalContent) {
          @include calc(height, '100% - 104px');
        }
      }
      @media (min-width: $screen-sm) {

      }
    }
    :local(.modalContainer){
      background-color: #FFF;
      text-align: left;
      height: 100%;
      @include border-radius(2px);
      @media (min-width: $screen-sm) {
        @include raised(3);
      }
      :local(.modalHeader) {
        font-size: 18pt;
        font-weight: bold;
        line-height: 24pt;
        padding: 6px 12px;
        border-bottom: 1px solid $default-color;
        @media (min-width: $screen-sm) {
          @include border-radius(2px 2px 0 0);
        }
      }
      :local(.modalContent) {
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        @include calc(max-height, '100% - 104px');
        @media (min-width: $screen-sm) {

        }
      }
      :local(.modalFooter) {
        border-top: 1px solid $default-color;
        width: 100%;
        padding: 12px 6px;
        @media (min-width: $screen-sm) {
          height: auto;
          @include border-radius(0 0 2px 2px);
        }
        :local(.footerButtons){
          text-align: right;
        }
      }
    }
  }
}

:local(.triggerElementContainer) {
  display: inline-block;
}

body.action-menu-active :local(.modalOverlay) {
  padding-bottom: 60px;
}