@use "sass:math";

@mixin chat-messagelist(
  $padding,
  $day-header-color,
  $day-header-padding-bottom,
  $day-header-first-padding-top,
  $day-header-font-size,
) {
  .dx-chat-messagelist {
    > .dx-scrollable {
      > .dx-scrollable-wrapper {
        > .dx-scrollable-container {
          > .dx-scrollable-content {
            padding-inline: $padding;
          }
        }
      }
    }
  }

  .dx-chat-messagelist-day-header {
    padding-bottom: $day-header-padding-bottom;
    color: $day-header-color;
    font-size: $day-header-font-size;

    &:first-child {
      padding-top: $day-header-first-padding-top;
    }
  }
}

@mixin chat-messagelist-empty(
  $messagelist-empty-padding,
  $messagelist-empty-icon-box-size,
  $messagelist-empty-icon-size,
  $messagelist-empty-icon-margin-bottom,
  $messagelist-empty-row-gap,
  $messagelist-empty-icon-color,
  $messagelist-empty-icon-background-color,
  $messagelist-empty-message-font-size,
  $messagelist-empty-message-color,
  $messagelist-empty-prompt-font-size,
  $messagelist-empty-prompt-color,
) {
  .dx-chat-messagelist-empty-view {
    row-gap: $messagelist-empty-row-gap;
    padding-block: $messagelist-empty-padding;
  }

  .dx-chat-messagelist-empty-image {
    color: $messagelist-empty-icon-color;
    background-color: $messagelist-empty-icon-background-color;
    padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2);
    margin-bottom: $messagelist-empty-icon-margin-bottom;

    &::before {
      font-size: $messagelist-empty-icon-size;
    }
  }

  .dx-chat-messagelist-empty-message {
    font-size: $messagelist-empty-message-font-size;
    color: $messagelist-empty-message-color;
  }

  .dx-chat-messagelist-empty-prompt {
    font-size: $messagelist-empty-prompt-font-size;
    color: $messagelist-empty-prompt-color;
  }
}

@mixin chat-messagelist-contextmenu(
  $delete-button-color,
  $delete-button-focused-color,
  $delete-button-focused-bg,
) {
  .dx-messagelist-context-menu-content {
    .dx-menu-item:has(.dx-icon-trash) {
      color: $delete-button-color;

      &.dx-state-focused {
        color: $delete-button-focused-color;
        background-color: $delete-button-focused-bg;
      }
    }
  }

  .dx-chat-messagelist {
    .dx-scrollable-container {
      > .dx-overlay-wrapper {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}