/**
 * sticky
 */

.xt-sticky {
  // default
  &.xt-clone {
    pointer-events: none;
    position: relative;
    visibility: hidden;
    top: 0;
    width: 100%;
  }
  &:not(.xt-clone) {
    position: relative;
    width: 100%;
  }
  // mode default
  &.xt-clone:not(.active) {
    position: absolute;
  }
  &:not(.xt-clone):not(.active) {
    position: relative;
  }
  // showhide
  .show-sticky {
    display: none;
  }
  .hide-sticky {
    display: block;
  }
  &:not(.xt-clone).active {
    .show-sticky {
      display: block;
    }
    .hide-sticky {
      display: none;
    }
  }
  // activation
  &:not(.xt-clone).active {
    position: fixed;
    z-index: @index-sticky;
    width: 100%;
  }
}

.xt-sticky-absolute {
  // mode absolute
  &.xt-clone {
    position: relative;
  }
  &.xt-clone:not(.active) {
    position: relative;
  }
  &:not(.xt-clone):not(.active) {
    position: relative;
  }
  &.xt-fixed:not(.xt-clone):not(.active) {
    position: absolute;
    width: 100%;
  }
}

.xt-sticky-fixed {
  // mode default
  &.xt-clone {
    position: relative;
  }
  &.xt-clone:not(.active) {
    position: relative;
  }
  &:not(.xt-clone):not(.active) {
    position: relative;
  }
  &.xt-fixed:not(.xt-clone):not(.active) {
    position: fixed;
    z-index: @index-sticky;
    width: 100%;
  }
}

.xt-sticky-fixed-always {
  // mode default
  &.xt-clone {
    position: absolute;
  }
  &.xt-clone:not(.active) {
    position: absolute;
  }
  &:not(.xt-clone):not(.active) {
    position: fixed;
    z-index: @index-sticky;
    width: 100%;
  }
  &.xt-fixed:not(.xt-clone):not(.active) {
    position: fixed;
    z-index: @index-sticky;
    width: 100%;
  }
}

// special

.sticky-disable {
  .xt-disable();
  position: relative !important;
  top: initial !important;
  left: initial !important;
  right: initial !important;
  bottom: initial !important;
  &.xt-clone {
    display: none !important;
  }
  &:not(.xt-clone) {
    position: relative !important;
  }
}