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

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


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

  .item {
    position: static;
  }
}

ion-item-options {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: $z-index-item-options;
  height: 100%;
  visibility: hidden;
}

ion-item-options .button {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}

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

  .button-inner {
    flex-direction: column;
  }
  ion-icon {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.3em;
  }
}

ion-item-sliding.active-slide {

  .item,
  .item.activated {
    position: relative;
    z-index: $z-index-item-options + 1;
    opacity: 1;
    transition: all 300ms cubic-bezier(0.36,0.66,0.04,1);
    pointer-events: none;

  }

  ion-item-options {
    display: flex;
  }

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