chatwoot/app/javascript/dashboard/assets/scss/_rtl.scss

.app-rtl--wrapper {
  direction: rtl;

  // Woot Tabs
  .tabs-title {
    &:first-child {
      margin-left: var(--space-small);
      margin-right: unset;
    }

    &:last-child {
      margin-left: unset;
      margin-right: var(--space-small);
    }
  }

  // woot tables
  table,
  thead,
  th {
    text-align: right;
  }

  // Table footer
  .footer {
    .page-meta {
      direction: initial;
    }
  }

  // Wizard box
  .wizard-box {
    direction: initial;
  }

  // Conversation details
  .conversation-details-wrap {
    .conversation-panel {
      // Message text
      .text-content {
        p {
          unicode-bidi: plaintext;
        }

        ul {
          padding-left: unset;
          padding-right: var(--space-two);
        }

        li {
          text-align: right;
        }
      }

      // Message items and actions
      li {
        &.right {
          .sender--info {
            padding: var(--space-small) var(--space-smaller)
              var(--space-smaller) 0;
          }

          .context-menu-wrap {
            margin-left: 0;
            margin-right: auto;
          }
        }
      }
    }

    // Conversation footer
    .conversation-footer {
      .preview-item {
        direction: initial;
      }
    }

    // Custom attributes section in conversation sidebar
    .conversation-sidebar-wrap .checkbox-wrap {
      .checkbox {
        margin-left: var(--space-small);
      }
    }

    // Conversation sidebar close button
    .close-button--rtl {
      transform: rotate(180deg);
    }

    // Resolve actions button
    .resolve-actions {
      .button-group .button:first-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: var(--border-radius-normal);
        border-top-left-radius: 0;
        border-top-right-radius: var(--border-radius-normal);
      }

      .button-group .button:last-child {
        border-bottom-left-radius: var(--border-radius-normal);
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--border-radius-normal);
        border-top-right-radius: 0;
      }
    }
  }

  // Conversation list
  .conversations-list-wrap {
    border-right: 0;

    .conversation {
      .conversation--meta {
        left: $space-normal;
        right: unset;

        .unread {
          margin-left: unset;
          margin-right: auto;
        }
      }

      .assignee-label {
        margin-left: 0;
        margin-right: var(--space-one);
      }

      .show-more--button {
        margin: unset;
        transform: rotate(180deg);
      }
    }

    .search-header--wrap {
      .search--input {
        text-align: right;
      }

      .layout-switch__container {
        transform: rotate(180deg);
      }
    }

    // Basic filter dropdown
    .basic-filter {
      left: 0;
      right: unset;
    }

    // Card label
    .label-container {
      .label {
        margin-left: var(--space-smaller);
        margin-right: 0;
      }
    }

    // Secondary sidebar toggle button
    .toggle-sidebar {
      margin-left: 0;
      margin-right: var(--space-minus-small);
      transform: rotate(180deg);
    }

    // Bulk actions
    .bulk-action__container {
      .triangle {
        left: var(--triangle-position);
        right: unset;
      }

      .bulk-action__agents {
        left: var(--space-small);
        right: unset;
      }

      .labels-container {
        left: var(--space-small);
        right: unset;

        .label-checkbox {
          margin: 0 0 0 var(--space-one);
        }
      }

      .actions-container {
        left: var(--space-small);
        right: unset;
      }

      .bulk-action__teams {
        left: var(--space-small);
        right: unset;
      }
    }
  }

  // Contact notes
  .card.note-wrap {
    .time-stamp {
      unicode-bidi: plaintext;
    }
  }

  // Notification panel
  .notification-wrap {
    left: 0;
    right: var(--space-jumbo);

    .action-button {
      margin-left: var(--space-small);
      margin-right: 0;
    }

    .notification-content--wrap {
      margin-left: 0;
      margin-right: var(--space-small);
    }
  }

  //   Help center
  .article-container .row--article-block {
    td:last-child {
      direction: initial;
    }
  }

  .portal-popover__container .portal {
    .actions-container {
      margin-left: unset;
      margin-right: var(--space-one);
    }
  }

  .edit-article--container {
    .header-right--wrap {
      .button-group .button:first-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: var(--border-radius-normal);
        border-top-left-radius: 0;
        border-top-right-radius: var(--border-radius-normal);
      }

      .button-group .button:last-child {
        border-bottom-left-radius: var(--border-radius-normal);
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--border-radius-normal);
        border-top-right-radius: 0;
      }
    }

    .header-left--wrap {
      .back-button {
        direction: initial;
      }
    }

    .article--buttons {
      .dropdown-pane {
        left: 0;
        position: absolute;
        right: unset;
      }
    }

    .sidebar-button {
      transform: rotate(180deg);
    }
  }

  .article-settings--container {
    border-left: 0;
    border-right: 1px solid var(--color-border-light);
    flex-direction: row-reverse;
    margin-left: 0;
    margin-right: var(--space-normal);
    padding-left: 0;
    padding-right: var(--space-normal);
  }

  .category-list--container .header-left--wrap {
    direction: initial;
    justify-content: flex-end;
  }

  // Toggle switch
  .toggle-button {
    &.small {
      span {
        &.active {
          transform: translate(var(--space-minus-small), var(--space-zero));
        }
      }
    }

    span {
      --minus-space-one-point-five: -0.9375rem;

      &.active {
        transform: translate(
          var(--minus-space-one-point-five),
          var(--space-zero)
        );
      }
    }
  }

  // Widget builder
  .widget-builder-container .widget-preview {
    direction: initial;
  }

  // Modal
  .modal-container {
    text-align: right;

    .modal-footer {
      button {
        margin-left: 0;
        margin-right: var(--space-small);
      }
    }
  }

  // Other changes

  .account-selector--wrap {
    direction: initial;
  }

  .colorpicker--chrome {
    direction: initial;
  }

  .mention--box {
    direction: initial;
  }

  .contact--details .contact--bio {
    direction: ltr;
  }

  .merge-contacts .child-contact-wrap {
    direction: ltr;
  }

  .contact--form .input-group {
    direction: initial;
  }

  // scss-lint:disable QualifyingElement
  .dropdown-menu--header > span.title {
    text-align: right;
  }
}