@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;
  width: 100%;
  overflow: hidden;
}

.ion-item-sliding .ion-item {
  //position: relative;
  position: static;
  pointer-events: none;
  opacity: 1;
  //z-index: 2;
  transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}

.ion-item-options {
  position: absolute;

  //@include multi-dir() {
  // scss-lint:disable PropertySpelling
  top: 0;
  right: 0;
  z-index: $z-index-item-options;
  display: none;
  height: 100%;
  font-size: 14px;
  visibility: hidden;
  //}

  //@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 {
  height: 100%;
  box-sizing: content-box;
  box-shadow: none;

  @include margin(0);
  @include padding(0, 0.7em);
  @include border-radius(0);

  &:last-child {
    @include safe-area-padding-horizontal(null, 0.7em);
  }
}

.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, 0.3em, 0);
  }
}

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

  .ion-item,
  .ion-item:active {
    position: relative;
    z-index: $z-index-item-options + 2;
    //transition: transform 500ms cubic-bezier(.36, .66, .04, 1);

    pointer-events: none;
    opacity: 1;
    will-change: transform;
  }

  .ion-item-options {
    display: flex;
    pointer-events: auto;
    visibility: visible;
  }

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

    //visibility: visible;
  }
}

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

button[expandable] {
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  transition-duration: 0;
  transition-property: none;
  flex-shrink: 0;
}

.ion-item-sliding.active-swipe-right button[expandable] {

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

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

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

.ion-item-sliding.active-swipe-left button[expandable] {

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

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

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