@import "./color.scss";

@mixin toastr-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@mixin toastr($color) {
  position: relative;
  overflow: hidden;
  margin: 16px 0 6px 0;
  pointer-events: all;
  cursor: pointer;
  width: 257px;
  color: $white;
  display: flex;
  align-items: center;
  background-color: $color;
  height: 45px;
}

@mixin toastr-wrapper-icon {
  color: $white-80;
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin toastr-content {
  display: flex;
  align-items: center;
}

@mixin toastr-content-title {
  margin: 0;
}

@mixin toastr-icon {
  padding: 0;
  width: auto;
  height: auto;
}

/* position */
.toast-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

/* toast styles */
.toast-title {
  font-weight: bold;
}
.toast-message {
  word-wrap: break-word;
}
.toast-message a,
.toast-message label {
  color: #ffffff;
}
.toast-message a:hover {
  color: #cccccc;
  text-decoration: none;
}
.toast-close-button {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 20px;
  color: #8c9198;
  line-height: 1;
  width: 20px;
  text-align: center;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none !important;
}
.toast-container {
  pointer-events: none;
  position: fixed;
  z-index: 999999;
}
.toast-container * {
  box-sizing: border-box;
}
.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 8px;
  padding: 18px 48px 18px 52px;
  width: 340px;
  background-position: 20px 18px;
  background-repeat: no-repeat;
  background-size: 20px;
  color: #000;
  box-shadow: 0px 0.4px 0.8px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-color: #fff;
}
.toast-container .ngx-toastr:hover {
  box-shadow: 0px 0.4px 0.8px rgba(0, 0, 0, 0.15),
    0px 3px 6px rgba(0, 0, 0, 0.25);
  opacity: 1;
  cursor: pointer;
}

.toast-info {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 1.66675C5.40008 1.66675 1.66675 5.40008 1.66675 10.0001C1.66675 14.6001 5.40008 18.3334 10.0001 18.3334C14.6001 18.3334 18.3334 14.6001 18.3334 10.0001C18.3334 5.40008 14.6001 1.66675 10.0001 1.66675ZM10.0001 14.1667C9.54175 14.1667 9.16675 13.7917 9.16675 13.3334V10.0001C9.16675 9.54175 9.54175 9.16675 10.0001 9.16675C10.4584 9.16675 10.8334 9.54175 10.8334 10.0001V13.3334C10.8334 13.7917 10.4584 14.1667 10.0001 14.1667ZM10.8334 7.50008H9.16675V5.83342H10.8334V7.50008Z' fill='%232962FF'/%3E%3C/svg%3E%0A");
}

.toast-error {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 1.66675C5.40033 1.66675 1.66699 5.40008 1.66699 10.0001C1.66699 14.6001 5.40033 18.3334 10.0003 18.3334C14.6003 18.3334 18.3337 14.6001 18.3337 10.0001C18.3337 5.40008 14.6003 1.66675 10.0003 1.66675ZM10.0003 10.8334C9.54199 10.8334 9.16699 10.4584 9.16699 10.0001V6.66675C9.16699 6.20842 9.54199 5.83342 10.0003 5.83342C10.4587 5.83342 10.8337 6.20842 10.8337 6.66675V10.0001C10.8337 10.4584 10.4587 10.8334 10.0003 10.8334ZM10.8337 14.1667H9.16699V12.5001H10.8337V14.1667Z' fill='%23F82C13'/%3E%3C/svg%3E%0A");
}

.toast-success {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 1.66675C5.40033 1.66675 1.66699 5.40008 1.66699 10.0001C1.66699 14.6001 5.40033 18.3334 10.0003 18.3334C14.6003 18.3334 18.3337 14.6001 18.3337 10.0001C18.3337 5.40008 14.6003 1.66675 10.0003 1.66675ZM7.74199 13.5751L4.75033 10.5834C4.42533 10.2584 4.42533 9.73341 4.75033 9.40841C5.07533 9.08342 5.60033 9.08342 5.92533 9.40841L8.33366 11.8084L14.067 6.07508C14.392 5.75008 14.917 5.75008 15.242 6.07508C15.567 6.40008 15.567 6.92508 15.242 7.25008L8.91699 13.5751C8.60033 13.9001 8.06699 13.9001 7.74199 13.5751Z' fill='%234CAF50'/%3E%3C/svg%3E%0A");
}

.toast-warning {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.72494 17.5001H16.2749C17.5583 17.5001 18.3583 16.1084 17.7166 15.0001L11.4416 4.1584C10.7999 3.05007 9.19994 3.05007 8.55827 4.1584L2.28327 15.0001C1.6416 16.1084 2.4416 17.5001 3.72494 17.5001ZM9.99994 11.6667C9.5416 11.6667 9.1666 11.2917 9.1666 10.8334V9.16673C9.1666 8.7084 9.5416 8.3334 9.99994 8.3334C10.4583 8.3334 10.8333 8.7084 10.8333 9.16673V10.8334C10.8333 11.2917 10.4583 11.6667 9.99994 11.6667ZM10.8333 15.0001H9.1666V13.3334H10.8333V15.0001Z' fill='%23FF9600'/%3E%3C/svg%3E%0A");
}

.toast-container.toast-top-center .ngx-toastr,
.toast-container.toast-bottom-center .ngx-toastr {
  width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.toast-container.toast-top-full-width .ngx-toastr,
.toast-container.toast-bottom-full-width .ngx-toastr {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.ngx-toastr {
  border-left: 4px solid #000;
  pointer-events: auto;
}
.toast-success {
  border-left-color: #51a351;
}
.toast-error {
  border-left-color: #bd362f;
}
.toast-info {
  border-left-color: #2f96b4;
}
.toast-warning {
  border-left-color: #f89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
}

ul.sd-notify__list {
  list-style: none;
  padding-left: 8px;
  margin-bottom: 0;
}

label.sd-notify__text {
  margin-top: 8px;
  color: #757575;
}

input.sd-notify__checkbox {
  &:checked ~ {
    .sd-notify__item--rest {
      display: block;
    }

    label.sd-notify__text--less {
      display: block;
    }

    label.sd-notify__text--show {
      display: none;
    }
  }
  ~ {
    .sd-notify__item--rest {
      display: none;
    }

    label.sd-notify__text--less {
      display: none;
    }

    label.sd-notify__text--show {
      display: block;
    }
  }
}

/* Responsive Design */
@media all and (max-width: 240px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  .toast-container .ngx-toastr.div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}
