<commit_before>@import "../../themes/ionic.globals";

// Item Sliding
// --------------------------------------------------
// The hidden right-side buttons that can be exposed under a list item with dragging.

ion-item-sliding {
  position: relative;
  display: block;
  overflow: hidden;

  width: 100%;
}

ion-item-sliding .item {
  position: static;
}

ion-item-options {
  @include position(0, 0, null, null);

  position: absolute;

  z-index: $z-index-item-options;
  display: none;

  justify-content: flex-end;

  height: 100%;

  font-size: 14px;

  visibility: hidden;
}

ion-item-options[side=left] {
  @include position-horizontal(0, auto);

  justify-content: flex-start;
}

ion-item-options .button {
  @include margin(0);
  @include padding(0, .7em);
  @include border-radius(0);

  height: 100%;

  box-shadow: none;

  box-sizing: content-box;
}

ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
ion-item-options:not([icon-start]) .button:not([icon-only]) {
  .button-inner {
    flex-direction: column;
  }

  ion-icon {
    @include padding(null, 0, .3em, 0);
  }
}

ion-item-sliding.active-slide {

  .item,
  .item.activated {
    position: relative;
    z-index: $z-index-item-options + 1;

    opacity: 1;
    transition: transform 500ms cubic-bezier(.36, .66, .04, 1);

    pointer-events: none;

    will-change: transform;
  }

  ion-item-options {
    display: flex;
  }

  &.active-options-left ion-item-options[side=left],
  &.active-options-right ion-item-options:not([side=left]) {
    width: 100%;

    visibility: visible;
  }
}

// Item Expandable Animation
// --------------------------------------------------

button[expandable] {
  flex-shrink: 0;

  transition-duration: 0;
  transition-property: none;
  transition-timing-function: cubic-bezier(.65, .05, .36, 1);
}

ion-item-sliding.active-swipe-right button[expandable] {
  @include padding-horizontal(90%, null);

  order: 1;

  transition-duration: .6s;
  transition-property: padding-left;
}

ion-item-sliding.active-swipe-left button[expandable] {
  @include padding-horizontal(null, 90%);

  order: -1;

  transition-duration: .6s;
  transition-property: padding-right;
}<commit_msg>fix(item-sliding): RTL fix for item sliding (#11825)<commit_after>@import "../../themes/ionic.globals";

// Item Sliding
// --------------------------------------------------
// The hidden right-side buttons that can be exposed under a list item with dragging.

ion-item-sliding {
  position: relative;
  display: block;
  overflow: hidden;

  width: 100%;
}

ion-item-sliding .item {
  position: static;
}

ion-item-options {
  position: absolute;
  z-index: $z-index-item-options;
  display: none;

  height: 100%;

  font-size: 14px;
  visibility: hidden;

  @include multi-dir() {
    // scss-lint:disable PropertySpelling
    top: 0;

    right: 0;
  }

  @include ltr() {
    justify-content: flex-end;
  }

  @include rtl() {
    justify-content: flex-start;

    &:not([side=right]) {
      justify-content: flex-end;

      // scss-lint:disable PropertySpelling
      right: auto;
      left: 0;
    }
  }
}

ion-item-options[side=left] {
  @include multi-dir() {
    // scss-lint:disable PropertySpelling
    right: auto;
    left: 0;
  }

  @include ltr() {
    justify-content: flex-start;
  }

  @include rtl() {
    justify-content: flex-end;
  }
}

ion-item-options .button {
  @include margin(0);
  @include padding(0, .7em);
  @include border-radius(0);

  height: 100%;

  box-shadow: none;

  box-sizing: content-box;
}

ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
ion-item-options:not([icon-start]) .button:not([icon-only]) {
  .button-inner {
    flex-direction: column;
  }

  ion-icon {
    @include padding(null, 0, .3em, 0);
  }
}

ion-item-sliding.active-slide {
  @include rtl() {
    &.active-options-left ion-item-options:not([side=right]) {
      width: 100%;

      visibility: visible;
     }
  }

  .item,
  .item.activated {
    position: relative;
    z-index: $z-index-item-options + 1;

    opacity: 1;
    transition: transform 500ms cubic-bezier(.36, .66, .04, 1);

    pointer-events: none;

    will-change: transform;
  }

  ion-item-options {
    display: flex;
  }

  &.active-options-left ion-item-options[side=left],
  &.active-options-right ion-item-options:not([side=left]) {
    width: 100%;

    visibility: visible;
  }
}

// Item Expandable Animation
// --------------------------------------------------

button[expandable] {
  flex-shrink: 0;

  transition-duration: 0;
  transition-property: none;
  transition-timing-function: cubic-bezier(.65, .05, .36, 1);
}

ion-item-sliding.active-swipe-right button[expandable] {
  transition-duration: .6s;
  transition-property: padding-left;

  @include multi-dir() {
    // scss-lint:disable PropertySpelling
    padding-left: 90%;
  }

  @include ltr() {
    order: 1;
  }

  @include rtl() {
    order: -1;
  }
}

ion-item-sliding.active-swipe-left button[expandable] {
  transition-duration: .6s;
  transition-property: padding-right;

  @include multi-dir() {
    // scss-lint:disable PropertySpelling
    padding-right: 90%;
  }

  @include ltr() {
    order: -1;
  }

  @include rtl() {
    order: 1;
  }
}
{'fraction_non_alphanumeric': 0.19172860682294646, 'fraction_numerical': 0.022298456260720412, 'mean_word_length': 2.5773687798227676, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3089479', 'n_tokens_mistral': 1963, 'n_tokens_neox': 1810, 'n_words': 371}