@use '../../themes/styles/mixins' as *;

.dialog-item-preview {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 16px;

  @include applyBorderBox; // Переместил после основных свойств

  &:hover {
    background: var(--divider);
  }

  &--active {
    box-shadow: 4px 0px 0px 0px var(--primary) inset;
    background: var(--divider);
  }

  &__content {
    width: calc(100% - 72px);
    display: flex;
    flex-direction: column;
    gap: 2px;

    &-top {
      display: flex;
      justify-content: space-between;

      &-title {
        font: var(--label-label-medium);
        color: var(--main-text, #0b1b0f);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-date {
        color: var(--tertiary-elements, #636d78);
        font: var(--label-label-small);
      }
    }

    &-bottom {
      display: flex;
      justify-content: space-between;
      gap: 5px;
      height: 32px;

      &-message {
        color: var(--secondary-text, #636d78);
        text-align: left;
        font: var(--body-body-small);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      &-controls {
        display: flex;
        align-items: center;
        gap: 5px;

        &-menu {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}