$DIALOG_SHADOW_COLOR: rgba($TERTIARY_FONT_COLOR, 0.3);
$DIALOG_TITLEBAR_HEIGHT: 40px;
$MODAL_OVERLAY_COLOR: rgba(#AAAAAA, 0.5);

// a class that jQuery applies for the 'modal'/lightbox effect
.ui-widget-overlay {
  background-color: $MODAL_OVERLAY_COLOR;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 90;

  // overriding typical theme defaults
  background-image: none;
  opacity: initial;
  filter: none;
}

[role='dialog'].ui-widget-content {
  background: $WHITE_BACKGROUND_COLOR;
  border: initial;
}

[role='dialog'].ui-widget {
  font-size: inherit;
  font-family: inherit;
  border: 1px solid $PRIMARY_BORDER_COLOR;
  @include border-radius($DEFAULT_BORDER_RADIUS);

  .ui-widget-header {
    background: $SECONDARY_BACKGROUND_COLOR;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: $PRIMARY_BORDER_COLOR;
  }

  .ui-widget-content {
    background: $WHITE_BACKGROUND_COLOR;
    border: initial;
  }
}

// these rules are here simply to override the current jQuery-ui theme
[role='dialog'].ui-dialog {
  padding: initial;

  .ui-dialog-titlebar {
    padding: initial;

    .ui-dialog-title {
      width: initial;
      margin: initial;
    }
    .ui-dialog-titlebar-close {
      position: initial;
      top: initial;
      right: initial;
      margin: initial;
    }
  }

  .ui-dialog-content {
    padding: initial;
    overflow: initial;
  }

  .ui-dialog-buttonpane {
    border: initial;
    display: initial;
    margin: initial;
    text-align: initial;
    padding: initial;

    .ui-dialog-buttonset {
      float: initial;

      button {
        float: initial;
      }
    }
  }

  .ui-corner-all {
    border-radius: initial;
  }

  .ui-button {
    background: initial;
  }
}


[role='dialog'].ui-dialog {
  @include box-shadow(0px 0px 3px 3px $DIALOG_SHADOW_COLOR, 0px 0px 3px 3px $DIALOG_SHADOW_COLOR);
  z-index: 100;

  // override the terrible focus that Chrome/FireFox uses
  *:focus {
    outline: none;
  }

  .ui-dialog-titlebar {
    padding-left: 10px;
    padding-right: 15px;
    height: $DIALOG_TITLEBAR_HEIGHT;
    position: relative;
    line-height: $DIALOG_TITLEBAR_HEIGHT;

    .ui-dialog-title {
      font-size: 16px;
      font-weight: bold;
      color: $SECONDARY_FONT_COLOR;
      width: calc(100% - 40px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ui-dialog-titlebar-close {
      position: absolute;
      right: 0;
      text-align: center;
      @extend .delete-icon;
      background: transparent no-repeat center top;
      min-width: 0;
      padding: 0;
      border: 0;
      width: $DIALOG_TITLEBAR_HEIGHT;
      height: $DIALOG_TITLEBAR_HEIGHT;
      /* hiding the "close" text on the dialog's close button */
      span {
        display: none;
      }
    }
  }
  .ui-dialog-content {
    margin: 10px;
  }
  .ui-dialog-buttonpane {
    padding-top: 10px;
    display: block;
    margin: 10px;
    border-top: 1px solid $PRIMARY_BORDER_COLOR;

    .ui-dialog-buttonset {
      .ui-button {
        margin: 0px;
        margin-right: 20px;
        min-width: 110px;
        padding: 0px;
        @extend button;
      }

      /* the first button should be a "primary action" button */
      .ui-button:first-child {
        @extend .primary-action;
      }
    }
  }
}