// Right to left styles.
// *** These styles are all going to be flipped by the r2 gem ***
// Adding the !important declaration to a rule prevents it from being flipped.

.rtl #topic-progress-wrapper .topic-admin-popup-menu.right-side,
.rtl #topic-progress-wrapper.docked .topic-admin-popup-menu.right-side {
  right: 80px;
}

// This is used to flip the .d-icon-caret-right
@mixin rotate($degrees) {
  -webkit-transform: rotate(#{$degrees}deg);
  -moz-transform: rotate(#{$degrees}deg);
  -ms-transform: rotate(#{$degrees}deg);
  -o-transform: rotate(#{$degrees}deg);
  transform: rotate(#{$degrees}deg);

  filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
  zoom: 1;
}

// Get the right caret to point left
.rtl .d-icon-caret-right {
  @include rotate(180);
}

// Changes the triangle arrow direction in .nav-stacked .active
// The 'left' and 'right' in these selectors is not being flipped by r2.
.rtl .nav-stacked a.active::after {
  border-left-color: transparent !important;
  border-right-color: $secondary !important;
}
.rtl code {
  direction: ltr !important;
  text-align: left !important;
}
.rtl .pull-left {
  float: right !important;
}
.rtl .autocomplete {
  left: 27px;
}

.rtl .admin-customize .current-style .toggle-mobile {
  position: static !important;
  float: left !important;
}
.rtl .admin-customize .current-style .toggle-maximize {
  position: static !important;
  float: left !important;
}
.rtl .dashboard-left {
  float: right !important;
}
.rtl .dashboard-right {
  float: left !important;
}

// This is for the support_mixed_text_direction setting
.cooked ul[dir="ltr"],
.d-editor-preview ul[dir="ltr"],
.cooked ul[dir="rtl"],
.d-editor-preview ul[dir="rtl"] {
  padding-right: 40px;
  padding-left: 40px;
}