// New Modal
//================================================== //

.modal {
  .modal-content {
    h1 {
      line-height: 3.5rem;
    }
  }

  .datagrid td.is-editing .colorpicker-container .icon {
    top: -1px;
  }

  .field {
    .icon + .icon-error,
    .icon + .icon-success {
      top: 11px !important;
    }

    input[data-error-type='tooltip'] + .icon-error,
    input[data-error-type='tooltip'] + .icon-success {
      top: 39px !important;
      height: 18px;
      width: 18px;
    }

    [data-error-type='tooltip']:not(input) ~ .icon-error,
    [data-error-type='tooltip']:not(input) ~ .icon-success {
      height: 18px;
      width: 18px;
    }
  }
}

.modal-content {
  > .btn-close {
    right: 16px;
    top: 18px;
  }
}

.modal .field.editor-container {
  max-width: 810px;
}

.modal {
  .tab-container {
    &.horizontal,
    &.header-tabs {
      > .tab-list-container {
        .tab {
          &:not(.last-child) {
            &.is-error,
            &.is-info,
            &.is-success,
            &.is-alert {
              .icon-error,
              .icon-info,
              .icon-success,
              .icon-alert {
                height: 15px;
                margin-left: 0;
                margin-right: 11px;
                margin-top: 0;
                right: -8px;
                width: 15px;
              }
            }
          }
        }
      }
    }
  }
}

.modal-content h1.has-status .icon {
  height: 22px;
  left: -5px;
  margin-left: 8px;
  width: 22px;
}

.modal .modal-content h1 {
  @include font-size(24);

  line-height: 3rem;

  @media screen and (min-width: ($breakpoint-big-phone + 1)) {
    @include font-size(26);
  }
}

.theme-new-dark {
  .modal {
    .slider-wrapper {
      background-color: $ids-color-palette-slate-50;
    }
  }
}

html[dir='rtl'] {
  .modal {
    .tab-container {
      &.horizontal,
      &.header-tabs {
        > .tab-list-container {
          .tab {
            &:not(.last-child) {
              &.is-error {
                .icon-error,
                .icon-info,
                .icon-alert {
                  margin-top: 1px;
                }
              }
            }
          }
        }
      }
    }
  }

  .modal-content {
    > .btn-close {
      left: 11px;
      right: auto;
    }
  }
}

//combine firefox and rtl rules
html[dir='rtl'] {
  &.is-firefox {
    .modal {
      .tab-container {
        &.horizontal,
        &.header-tabs {
          > .tab-list-container {
            .tab {
              &:not(.last-child) {
                &.is-error {
                  .icon-error,
                  .icon-info,
                  .icon-alert {
                    margin-top: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.modal-content h1.has-status .icon {
  top: 7px;
}

.modal .lookup .icon {
  position: relative;
}

@media (min-width: $breakpoint-phone) and (max-width: ($breakpoint-slim + 20px)) {
  .modal {
    .field {
      input[data-error-type='tooltip'][data-validate*="email"] + .icon-error {
        position: absolute;
        inset-inline-end: 16px;
      }
    }
  }
}

@media (min-width: ($breakpoint-slim + 20px)) and (max-width: $breakpoint-phone-to-tablet) {
  .modal {
    .field {
      input[data-error-type='tooltip'][data-validate*="email"] + .icon-error {
        position: relative;
        inset-inline-end: 16px;
        top: -1px !important;
      }
    }
  }
}