@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../overlay/colors" as *;
@use "../toolbar/mixins" as *;
@use "../toolbar/sizes" as *;
@use "../button/mixins" as *;
@use "../typography/sizes" as *;
@use "../../base/popup";

// adduse
@use "../overlay";


$generic-popup-toolbar-height: $generic-base-inline-widget-height;
$generic-popup-toolbar-label-font-size: $generic-m-font-size;


.dx-popup-wrapper {
  & > .dx-overlay-content {
    border: 1px solid $overlay-border-color;
    background: $overlay-content-bg;
    box-shadow: 0 6px 12px $overlay-content-shadow-color;
    border-radius: $popup-border-radius;
  }

  & > .dx-popup-fullscreen {
    border-radius: 0;
  }
}

.dx-popup-title {
  position: relative;
  padding: $generic-popup-toolbartop-padding;
  min-height: 28px;
  border-bottom: 1px solid $popup-title-border-color;
  background: $popup-title-bg;
  color: $popup-title-color;

  &.dx-toolbar {
    @include dx-toolbar-sizing($generic-popup-toolbar-height, $generic-popup-toolbartop-padding, $generic-popup-toolbar-label-font-size, $generic-popup-toolbar-item-spacing );

    box-shadow: none;

    &.dx-has-close-button {
      .dx-toolbar-after {
        .dx-toolbar-button:nth-last-child(2) {
          padding-right: 0;

          .dx-rtl & {
            padding-left: 0;
          }
        }
      }
    }
  }

  .dx-closebutton {
    display: block;
    position: relative;
    left: $generic-popup-closebutton-offset;

    .dx-rtl & {
      left: 0;
      right: $generic-popup-closebutton-offset;
    }

    .dx-icon {
      box-sizing: border-box;
    }

    @include dx-button-styling();
  }
}

.dx-popup-content {
  padding: $generic-popup-content-padding;

  & > .dx-button {
    margin: $generic-popup-button-margin;
  }
}

.dx-popup-bottom {
  background: $popup-bottom-bg;
  color: $popup-bottom-color;

  &.dx-toolbar {
    @include dx-toolbar-sizing(
      $generic-popup-toolbar-height,
      $generic-popup-toolbarbottom-padding,
      $generic-popup-toolbar-label-font-size,
      $generic-popup-toolbar-item-spacing
    );

    .dx-device-mobile & {
      @include dx-toolbar-sizing(
        $generic-popup-toolbar-height,
        $generic-popup-toolbarbottom-padding,
        $generic-popup-toolbar-label-font-size,
        $generic-popup-toolbar-item-spacing
      );
    }
  }

  .dx-button {
    min-width: 100px;
  }
}

.dx-popup-content.dx-dialog-content {
  min-width: 220px - 2 * $generic-popup-content-padding;
  padding: $generic-popup-content-padding;
}

.dx-dialog-message {
  padding: 0;
}