@import "../../style/variables";

:host {
  position: fixed;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &.popup-error {
    div.popup-wrapper {
      background: $cc-popup-background-grey;
    }
  }

  &.popup-warning {
    .secondary-font {
      color: $cc-color-light;
    }
    div.popup-wrapper {
      background: $cc-popup-background-dark;
    }
    div.popup-title, div.popup-content{
      color: $cc-color-light;
    }
  }

  &.popup-notification,
  &.popup-question {
    div.popup-wrapper {
      background: $cc-popup-background-grey;
    }
  }

  //&.mobile-sizings {
  //  left: 0;
  //  width: 100vw;
  //  div.popup-wrapper {
  //    padding: 20px 10px;
  //  }
  //}
}

///deep/ .details {
//  margin-top: 20px;
//  max-width: 400px;
//  max-height: 250px;
//}
//
///deep/ .details-link {
//  @extend %unselectable;
//  @extend %link-default;
//}
//
co-button.popup-close, co-button.popup-downloadable {
  position: absolute;
  transform: translateY(-50%);
}

co-button.popup-close {
  right: 5px;
}

co-button.popup-downloadable {
  right: 45px;
}

.popup-wrapper {
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 13px -2px rgba(0, 0, 0, 0.2);
  background : $cc-popup-background-grey;
  min-width: $cc-popup-min-width;
  .popup-title {
    padding-bottom: 20px;
    border-bottom: 1px solid $cc-color-input-disabled;
  }
  .popup-content {
    margin-top: 20px;
    margin-bottom: 20px;
    max-height: 50vh;
    max-width: 80vw;
    overflow: auto;
  }
}

//.movable {
//  .popup-wrapper {
//    @extend %cursor-move;
//  }
//}
//
//.popup-title {
//  @extend %padding-bottom-big;
//  @extend %border-bottom-solid;
//}
//
//.popup-content {
//  @extend %cursor-default;
//  @extend %overflow-y-auto;
//  @extend %margin-vertical-big;
//  max-height: 50vh;
//}
