@import 'dialog-theme';
$icon-focus-background: rgba(200, 200, 200, 0.4);
$icon-focus-transition: opacity 0.2s cubic-bezier(0.35, 0, 0.25, 1),
  background-color 0.2s cubic-bezier(0.35, 0, 0.25, 1);
$header-icon-width: 24px;
$header-icon-height: 24px;

.cdk-overlay-backdrop {
  background: rgba(255, 255, 255, 0.8) !important;
}
.cdk-overlay-pane {
  display: block;
}
.cdk-overlay-connected-position-bounding-box {
  .cdk-overlay-pane {
    display: flex;
  }
}
* {
  outline: 0 none !important;
}

.oui-dialog-container {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
  z-index: 29991;
  border-radius: 0;
  margin: 0 auto;
  display: block;
  -webkit-box-shadow: 0 1px 3px 2px rgba(167, 167, 167, 0.5);
  -moz-box-shadow: 0 1px 3px 2px rgba(167, 167, 167, 0.5);
  box-shadow: 0 1px 3px 2px rgba(167, 167, 167, 0.5);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 14px;
  color: #333;
  padding: 0px;
  background: #fff;
  .oui-dialog-header {
    font-size: 22px;
    line-height: 30px;
    padding: 13px 22px 20px;
    position: relative;
    color: #333;
    min-height: 29px;
    .oui-dialog-header-title {
      width: calc(100% - 118px);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block;
    }
    .oui-dialog-header-image {
      position: absolute;
      width: 20px;
      margin-right: 10px;
      text-align: center;
      height: 20px;
      top: 18px;
      img {
        vertical-align: super;
        margin-top: 3.5px;
      }
    }
  }
}

.oui-dialog-header-image + .oui-dialog-header-title {
  margin-left: 30px;
  width: calc(100% - 148px) !important;
}

.oui-dialog-header-action {
  position: absolute;
  top: 16px;
  left: auto;
  right: 16px;
  bottom: auto;
  svg {
    fill: #4a4a4a;
  }
}
.oui-dialog-header-action::after {
  clear: both;
  content: '';
  display: block;
}
.oui-dialog-header-action div {
  margin: 0px 0px 0px 4px;
  float: right;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.oui-dialog-header-action a {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.oui-dialog-header-action div:nth-last-child(1) {
  margin: 0px;
}

.oui-dialog-header-close {
  cursor: pointer;
  width: $header-icon-width;
  height: $header-icon-height;
  line-height: 1;
  padding: 2px;
  text-align: center;
  .oui-icon {
    width: 20px;
    height: 20px;
    svg {
      vertical-align: top;
    }
  }
  &[class^='cdk'],
  &[class$='focused'],
  &:hover {
    background: $icon-focus-background;
    border-radius: 2px;
    transition: $icon-focus-transition;
  }
}
.oui-dialog-header-article {
  width: $header-icon-width;
  height: $header-icon-height;
  float: right;
  margin-left: 4px;
  line-height: 1;
  padding: 2px;
  text-align: center;
  .oui-icon {
    width: 16px;
    height: 20px;
    svg {
      vertical-align: top;
      fill: #4a4a4a;
    }
  }
  &[class^='cdk'],
  &[class$='focused'],
  &:hover {
    background: $icon-focus-background;
    border-radius: 2px;
    transition: $icon-focus-transition;
  }
  svg {
    fill: #006bb1;
  }
}
.oui-dialog-header-video {
  width: $header-icon-width;
  height: $header-icon-height;
  position: relative;
  float: right;
  margin-left: 4px;
  line-height: 1;
  padding: 2px;
  .oui-icon {
    width: 20px;
    height: 20px;
  }
  &[class^='cdk'],
  &[class$='focused'] {
    background: $icon-focus-background;
    border-radius: 2px;
    transition: $icon-focus-transition;
  }
  svg {
    fill: #006bb1;
  }
}
.oui-dialog-header-separator {
  margin-right: 5px !important;
}
.oui-dialog-header-separator::after {
  border-right: 1px solid #333;
  content: '';
  height: 20px;
  position: absolute;
  right: -5px;
}

.oui-dialog-content {
  color: #333;
  min-height: 30px;
  line-height: 22px;
  padding: 0 22px 30px;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;
  overflow: auto;
  max-height: 65vh;
}
.oui-dialog-footer {
  padding: 12px 22px;
  width: 100%;
  border-top: 1px solid #c8c8c8;
  box-sizing: border-box;
  .oui-dialog-footer-action-left {
    float: left;
    button {
      margin-right: 36px;
      &:nth-last-child(1) {
        margin-right: 0px;
      }
    }
  }
  .oui-dialog-footer-action-right {
    float: right;
    button {
      margin-left: 12px;
      &:nth-child(1) {
        margin-left: 0px;
      }
    }
  }
}
.oui-dialog-footer::after {
  clear: both;
  content: '';
  display: block;
}
.cross-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}