// blade defaults
$ngxBladeBorderColor: rgba(127, 127, 127, 1) !default;
$ngxBladeZIndex: 49;

// header defaults
$ngxBladeHeaderBackground: rgba(0, 0, 0, 1) !default;
$ngxBladeHeaderTextColor: rgba(255, 255, 255, 1) !default;

// body defaults
$ngxBladeBodyBackground: rgba(255, 255, 255, 1) !default;
$ngxBladeBodyTextColor: rgba(255, 255, 255, 1) !default;

// header action button (Minimize/Maximize, Close) defaults
$ngxBladeActionButtonBackground: rgba(255, 255, 255, 0.3) !default;
$ngxBladeCloseButtonHoverBackground: rgba(170, 0, 0, 1) !default;

// footer defaults
$ngxBladeFooterBackground: rgba(238, 238, 238, 1) !default;
$ngxBladeFooterTextColor: rgba(0, 0, 0, 1) !default;

.modal-cover {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.4;
  filter: alpha(opacity=50);
  background-color: rgba(0, 0, 0, 0.25);
  z-index: $ngxBladeZIndex;
}

.wrapper {
  z-index: $ngxBladeZIndex+1;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 0 10px 1px $ngxBladeBorderColor;

  .blade-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: none;
    align-self: strech;

    .blade-header {
      display: flex;
      background-color: $ngxBladeHeaderBackground;
      color: $ngxBladeHeaderTextColor;
      justify-content: space-between;
      padding: 5px;

      .header-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP", Tahoma, Arial, sans-serif;

        .header-title-wrapper {
          width: 100%;
          color: inherit;
        }
      }

      .header-actions {
        display: flex;

        .action-button {
          display: flex;
          height: 30px;
          width: 30px;
          background-color: transparent;
          justify-content: center;
          align-items: center;
          transition: background-color 0.4s ease-out;
          cursor: pointer;

          &:hover {
            background: darken($ngxBladeActionButtonBackground, 10%);
          }
        }

        .danger {
          &:hover {
            background-color: $ngxBladeCloseButtonHoverBackground !important;
          }
        }
      }
    }

    .blade-body {
      display: flex;
      flex: 1;
      padding: 5px;
      height: 100%;
      background-color: $ngxBladeBodyBackground;
      overflow-y: auto;
      min-height: 50vh;

      .blade-body-wrapper {
        width: 100%;
        height: 100%;
        background-color: inherit;
      }
    }

    .blade-footer {
      display: flex;
      align-self: stretch;
      color: $ngxBladeFooterTextColor;

      .blade-footer-wrapper {
        width: 100%;
        height: 100%;
        background-color: $ngxBladeFooterBackground;
      }
    }
  }
}