@use "sass:color";

// Modals

.modal {

  .btn {
    padding: 0 22px;
    margin-inline-end: .5rem;
    font-size: 1rem;
    line-height: 2.3rem;
    color: var(--template-text-dark);
    background: var(--white);
    border-color: var(--whiteoffset);
    box-shadow: $modal-btn-box-shadow;
  }

  .btn-primary:not([href]),
  .btn-success:not([href]),
  .btn-danger:not([href]),
  .btn-secondary:not([href]) {
    color: var(--template-text-dark);
    background: var(--white);
    border: 1px solid var(--template-text-dark);
  }

  .btn-primary:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--primary);
      border-color: var(--primary);
    }
  }

  .btn-secondary:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--secondary);
      border-color: var(--secondary);
    }
  }

  .btn-success:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--success);
      border-color: var(--success);
    }
  }

  .btn-danger:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--danger);
      border-color: var(--danger);
    }
  }

  .btn.btn-danger {
    [class^="#{$jicon-css-prefix}-"],
    [class*=" #{$jicon-css-prefix}-"],
    [class^="#{$fa-css-prefix}-"],
    [class*=" #{$fa-css-prefix}-"],
    span {
      display: inline-block;
      width: 2.375rem;
      height: 100%;
      margin: 0 16px;
      margin-inline-start: -22px;
      line-height: 2.375rem;
      color: hsla(0, 0%, 100%, .9);
      background-color: var(--danger);
    }
  }

  .btn.btn-success {
    [class^="#{$jicon-css-prefix}-"],
    [class*=" #{$jicon-css-prefix}-"],
    [class^="#{$fa-css-prefix}-"],
    [class*=" #{$fa-css-prefix}-"],
    span {
      display: inline-block;
      width: 2.375rem;
      height: 100%;
      margin: 0 16px;
      margin-inline-start: -22px;
      line-height: 2.375rem;
      color: hsla(0, 0%, 100%, .9);
      background-color: var(--success);
    }
  }
}

.modal-header {
  padding: 0 15px;
}

.modal-body {
  overflow-y: initial;
}

.modal-title {
  font-weight: $font-weight-normal;
  line-height: $modal-header-height;
}

.contentpane {
  padding: 20px;
}

// Changelog
.changelog {
  text-align: start !important;

  &__item {
    display: flex;
    border-bottom: 1px solid $table-border-color;

    @include media-breakpoint-down(md) {
      flex-direction: column;
    }
  }

  &__tag {
    flex: 1 0 180px;
    max-width: 180px;
    padding: 10px 15px;
    text-align: end;
    background: color.adjust($gray-100, $lightness: -2.5%);
    border-right: 1px solid $table-border-color;

    .badge {
      border-radius: .2rem;

      &.badge-jlanguage {
        background-color: $white;
      }
    }

    @include media-breakpoint-down(md) {
      flex: 1 0 auto;
      max-width: 100%;
      text-align: left;
      border-right: 0;
      border-bottom: 1px solid $table-border-color;
    }
  }

  &__list {
    padding: 10px 15px;

    ul {
      padding-inline-start: 15px;
      margin-bottom: 0;
    }

    li {
      margin-bottom: .15rem;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

// Styling for joomla-dialog element
joomla-dialog {
  dialog {
    width: 96vw;
    max-width: 1700px;
    height: 96vh;
    padding: 0;
    border: 1px solid var(--border-color-translucent);
    border-radius: .3rem;
    box-shadow: $modal-joomla-dialog-box-shadow;

    @include media-breakpoint-up(xxl) {
      width: 80vw;
      height: 80vh;
    }

    // Override display to flex, to scale the content to full height
    &[open] {
      display: flex;
    }
  }

  &[type="image"] {
    dialog {
      width: fit-content;
      height: fit-content;
    }
  }

  &[type="iframe"] {
    dialog {
      overflow: hidden;
    }
  }

  iframe.iframe-content {
    width: 100%;
    height: 100%;
  }

  // Extra loading animation for iframe and ajax types
  &[type="iframe"],
  &[type="ajax"] {
    &.loading {
      dialog:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 66px;
        height: 66px;
        content: "";
        background: url("../../../../system/images/ajax-loader.gif") no-repeat center; // TODO: use svg animation?
        transform: translate(-50%, -50%);
      }
    }
  }
}

// Dialog animation
joomla-dialog dialog[open] {
  animation: dialog-show .4s ease normal;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes dialog-show {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}

// Dialog elements
.joomla-dialog-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  width: 100%;
  background: var(--body-bg);

  .buttons-holder {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;

    button {
      margin-inline: .375rem;
    }
  }
}

.joomla-dialog-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);

  h3 {
    margin: 0;
  }

  .header-icon {
    margin-inline-end: .375rem;
    font-size: $h3-font-size;
  }

  &.empty {
    display: none;
  }
}

.joomla-dialog-body {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 auto;

  .buttons-holder {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  // Apply overflow for potentially large content
  joomla-dialog[type="inline"],
  joomla-dialog[type="ajax"] & {
    overflow: auto;
  }

  // Content basic loading animation
  joomla-dialog.loading & {
    opacity: 0;
  }

  joomla-dialog.loaded & {
    opacity: 1;
    transition: opacity .4s ease;
  }
}

.joomla-dialog-footer {
  position: relative;
  padding: 1rem;
  border-top: 1px solid var(--border-color);

  .buttons-holder button {
    padding-inline: 22px;
  }

  &.empty {
    display: none;
  }
}

// Dialog alert and confirm
.joomla-dialog-alert,
.joomla-dialog-confirm {
  dialog {
    width: 600px;
    max-width: 80vw;
    height: fit-content;
  }

  .joomla-dialog-body {
    padding: 1rem;
  }
}

// Dialog for content select field
.joomla-dialog-content-select-field {
  dialog {
    @include media-breakpoint-up(xxl) {
      width: 90vw;
      height: 90vh;
    }
  }
}

.modal-content {
  background-color: var(--body-bg);
}

// dark
@if $enable-dark-mode {
  @include color-mode(dark) {
    .modal {

      .btn {

        &.btn-primary, &.btn-primary:not([href]) {
          color: map-get($atum-colors-dark, "btn-primary-color");
          background: map-get($atum-colors-dark, "btn-primary-bg");
          border: map-get($atum-colors-dark, "btn-primary-border");

          &:hover {
            color: map-get($atum-colors-dark, "btn-primary-color");
            background: map-get($atum-colors-dark, "btn-primary-bg-hvr");
            border: map-get($atum-colors-dark, "btn-primary-border-hvr");
            box-shadow: none;
          }
        }

        &.btn-success, &.btn-success:not([href]) {
          color: map-get($atum-colors-dark, "atum-btn-success-icon");
          background: map-get($atum-colors-dark, "atum-btn-success-bg");
          border: map-get($atum-colors-dark, "atum-btn-success-border");
          box-shadow: none;

          &:hover {
            color: map-get($atum-colors-dark, "atum-btn-success-icon");
            background: map-get($atum-colors-dark, "atum-btn-success-bg-hvr");
            border: map-get($atum-colors-dark, "atum-btn-success-border");
            box-shadow: none;
          }

          &:disabled {
            background: map-get($atum-colors-dark, "body-bg");
            border: map-get($atum-colors-dark, "form-control-border-disabled");
            opacity: .5;
          }
        }

        &.btn-danger, &.btn-danger:not([href]) {
          color: map-get($atum-colors-dark, "atum-btn-danger-color");
          background: map-get($atum-colors-dark, "atum-btn-danger-bg");
          border: map-get($atum-colors-dark, "atum-btn-danger-border");
          box-shadow: none;

          &:hover {
            color: map-get($atum-colors-dark, "atum-btn-danger-color");
            background: map-get($atum-colors-dark, "atum-btn-danger-bg-hvr");
            border: map-get($atum-colors-dark, "atum-btn-danger-border-hvr");
            box-shadow: none;
          }
        }

        &.btn-secondary, &.btn-secondary:not([href]) {
          color: map-get($atum-colors-dark, "btn-secondary-color");
          background: map-get($atum-colors-dark, "btn-secondary-bg");
          border: map-get($atum-colors-dark, "btn-secondary-border");
          box-shadow: none;

          &:hover {
            color: map-get($atum-colors-dark, "btn-secondary-color");
            background: map-get($atum-colors-dark, "btn-secondary-bg-hvr");
            border: map-get($atum-colors-dark, "btn-secondary-border-hvr");
            box-shadow: none;
          }
        }

        &:disabled {
          background: map-get($atum-colors-dark, "body-bg");
          opacity: .5;
        }
      }

    }
    .joomla-dialog-container .changelog .changelog__item .changelog__tag {
      background: map-get($atum-colors-dark, "body-bg");
    }
  }
}