@import "../../globals.core";

// 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;

  .item {
    position: static;
  }
}

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

  height: 100%;

  visibility: hidden;
}

ion-item-options .button {
  margin: 0;

  height: 100%;

  border-radius: 0;
  box-shadow: none;
}

ion-item-options:not([icon-left]) .button-icon-left {
  font-size: 14px;

  .button-inner {
    flex-direction: column;
  }

  ion-icon {
    padding-right: 0;
    padding-bottom: .3em;
    padding-left: 0;
  }
}

ion-item-sliding.active-slide {

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

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

    pointer-events: none;

  }

  ion-item-options {
    display: flex;
  }

  &.active-options ion-item-options {
    visibility: visible;
  }
}