//
// Global Dialog Styles
// ----------------------------
// Styles Drupal's ui-dialog to match Bootstrap modal appearance
//

@import "../global";

// CSS Variables for dialog styling using Bootstrap variables
:root {
  // Dialog base styles
  --dialog-border-radius: #{$modal-content-border-radius};
  --dialog-box-shadow: #{$modal-content-box-shadow-xs};
  --dialog-border-width: #{$modal-content-border-width};
  --dialog-border-color: #{$modal-content-border-color};

  // Dialog backdrop
  --dialog-backdrop-bg: #{$modal-backdrop-bg};
  --dialog-backdrop-opacity: #{$modal-backdrop-opacity};

  // Dialog header
  --dialog-header-bg: #{$modal-header-bg};
  --dialog-header-border-color: #{$modal-header-border-color};
  --dialog-header-border-width: #{$modal-header-border-width};
  --dialog-header-padding: var(--form-item-spacing, #{$modal-header-padding});
  --dialog-title-color: #{$modal-title-color};
  --dialog-title-font-size: #{$modal-title-font-size};
  --dialog-title-font-weight: #{$modal-title-font-weight};

  // Dialog body
  --dialog-body-padding: var(--form-item-spacing, #{$modal-body-padding});
  --dialog-body-color: #{$modal-body-color};

  // Dialog footer
  --dialog-footer-bg: #{$modal-footer-bg};
  --dialog-footer-border-color: #{$modal-footer-border-color};
  --dialog-footer-border-width: #{$modal-footer-border-width};
  --dialog-footer-padding: var(--form-item-spacing, #{$modal-footer-padding});

  // Close button
  --dialog-close-color: #{$modal-header-close-color};
  --dialog-close-hover-color: #{$modal-header-close-color};
  --dialog-close-focus-color: #{$modal-header-close-color};
  --dialog-close-opacity: #{$modal-header-close-opacity};
  --dialog-close-hover-opacity: #{$modal-header-close-hover-opacity};
  --dialog-close-focus-opacity: 1;
  --dialog-close-focus-shadow: #{$modal-header-close-focus-shadow};
  --dialog-close-disabled-opacity: #{$modal-header-close-disabled-opacity};

  // Backdrop effects
  --dialog-backdrop-blur: #{$modal-backdrop-blur};

  // Animation timing
  --dialog-fade-duration: #{$modal-fade-duration};
  --dialog-scale-duration: #{$modal-scale-duration};
}

// Base dialog styling
.ui-dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: #{$zindex-modal};
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  outline: 0;

  // Dialog wrapper - this is the main dialog container
  &.ui-widget-content {
    position: relative;
    width: auto;
    max-width: #{$modal-lg};
    margin: #{$modal-dialog-margin};
    pointer-events: auto;
    background-color: var(--beo-white);
    background-clip: padding-box;
    border: var(--dialog-border-width) solid var(--dialog-border-color);
    border-radius: var(--dialog-border-radius);
    box-shadow: var(--dialog-box-shadow);
    outline: 0;
  }

  // Dialog backdrop is handled by separate .ui-widget-overlay element
}

// Dialog backdrop
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: #{$zindex-modal-backdrop};
  width: 100vw;
  height: 100vh;
  background-color: var(--dialog-backdrop-bg);
  opacity: var(--dialog-backdrop-opacity);
  transition: opacity var(--dialog-fade-duration) linear;
}

// Dialog titlebar (header)
.ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dialog-header-padding);
  background-color: var(--dialog-header-bg);
  border-bottom: var(--dialog-header-border-width) solid var(--dialog-header-border-color);
  border-top-left-radius: var(--dialog-border-radius);
  border-top-right-radius: var(--dialog-border-radius);
  min-height: 3.5rem; // Ensure consistent height

  .ui-dialog-title {
    margin: 0;
    font-size: var(--dialog-title-font-size);
    font-weight: var(--dialog-title-font-weight);
    color: var(--dialog-title-color);
    line-height: #{$modal-title-line-height};
    flex: 1; // Take up available space
    padding-right: 1rem; // Space from close button
  }

  .ui-dialog-titlebar-close {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 0;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--dialog-close-color);
    opacity: var(--dialog-close-opacity);
    font-size: #{$font-size-lg};
    font-weight: #{$font-weight-bold};
    line-height: 1;
    text-shadow: none;
    transition: all #{$transition-base};
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; // Prevent shrinking

    &:hover,
    &:focus {
      color: var(--dialog-close-hover-color);
      text-decoration: none;
      opacity: var(--dialog-close-hover-opacity);
      background-color: rgb(0 0 0 / 5%);
    }

    &:focus {
      opacity: var(--dialog-close-focus-opacity);
      box-shadow: var(--dialog-close-focus-shadow);
      background-color: rgb(0 0 0 / 10%);
    }

    // Close icon
    .ui-icon.ui-icon-closethick {
      display: none;
    }

    // Custom close icon
    &::before {
      content: "×";
      font-size: 1.5rem;
      font-weight: #{$font-weight-bold};
      line-height: 1;
      display: block;
    }
  }
}

// Dialog content (body)
.ui-dialog-content {
  position: relative;
  padding: var(--dialog-body-padding);
  color: var(--dialog-body-color);
  overflow: auto;
  background-color: var(--beo-white);
  border: 0;

  // Form specific styling.
  .credit-card-form__expiration,
  .container--edit-payment-method-billing-information {
    margin-bottom: var(--form-item-spacing);
  }

  .container--edit-payment-method {
    margin-bottom: var(--form-item-spacing);

    .credit-card-form__expiration {
      margin-block: var(--form-item-spacing) 0;
    }
  }
}

// Dialog button pane (footer)
.ui-dialog-buttonpane {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--dialog-footer-padding);
  background-color: var(--dialog-footer-bg);
  border-top: var(--dialog-footer-border-width) solid var(--dialog-footer-border-color);
  border-bottom-left-radius: var(--dialog-border-radius);
  border-bottom-right-radius: var(--dialog-border-radius);

  .ui-dialog-buttonset {
    display: flex;
    gap: var(--form-item-spacing, #{$btn-padding-x});
    margin: 0;

    > * {
      margin: 0;
    }
  }

  // Dialog button styling
  .dialog-cancel {
    @include button-reset;

    color: var(--beo-danger-color, #{$danger});
    text-decoration: underline;
  }

  .button--danger {
    @extend .btn;
    @include button-variant($danger, $danger, $white);
  }
}

// Responsive adjustments
@include media-breakpoint-down(sm) {
  .ui-dialog {
    .ui-dialog-content {
      padding: #{$spacer};
    }

    .ui-dialog-titlebar {
      padding: #{$spacer};
    }

    .ui-dialog-content {
      padding: #{$spacer};

      .form-actions {
        flex-direction: column;

        .btn {
          width: 100%;
        }
      }
    }
  }
}
