.#{$prefix}listswiperaccordion {
  position: absolute;
  height: auto;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 0;
}

.#{$prefix}listswiperaccordion-wrapper {
  display: none;
  position: relative;
  flex-direction: row;
  width: 100%;

  .#{$prefix}listswiperaction {
    flex: 1 0 0;
    overflow: hidden;
  }
}

// When in Left Side mode the item will pin to the left
.#{$prefix}listswiperaccordion-side-left {
  left: 0;
}

// When in Right Side mode the item will pin to the right
.#{$prefix}listswiperaccordion-side-right {
  right: 0;
}

// Right Side Wrapper is only visible when in right side mode
.#{$prefix}listswiperaccordion-side-right .#{$prefix}listswiperaccordion-wrapper-right {
  display: flex;
}

// Left Side Wrapper is only visible when in left side mode
.#{$prefix}listswiperaccordion-side-left .#{$prefix}listswiperaccordion-wrapper-left {
  display: flex;
}

.#{$prefix}listswiperaccordion-multiple {
  // right/left side expander when not 'collapsed'
  &.#{$prefix}listswiperaccordion-wrapper-right:after,
  &.#{$prefix}listswiperaccordion-wrapper-left:before {
    content: '';
    flex: 0;
  }

  // transitions from full to 'collapsed' state
  .#{$prefix}listswiperaction,
  &.#{$prefix}listswiperaccordion-wrapper:after,
  &.#{$prefix}listswiperaccordion-wrapper:before {
    transition: flex .4s ease-in,
    padding .15s ease-in .25s,
    min-width .4s ease-in,
    border-color .4s ease-in,
    border-width .4s ease-in,
    opacity .4s ease-in;
  }
}

.#{$prefix}listswiperaccordion-wrapper.#{$prefix}listswiperaccordion-single .#{$prefix}listswiperaction {
  flex: 0 0 auto;
}

// Use the opposite Pseudo then the expander, because we only have two.
.#{$prefix}listswiperaccordion-wrapper-left:after, .#{$prefix}listswiperaccordion-wrapper-right:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.#{$prefix}listswiperaccordion-wrapper-left.#{$prefix}listswiperaccordion-single {
  justify-content: flex-start;
}

.#{$prefix}listswiperaccordion-wrapper-right.#{$prefix}listswiperaccordion-single {
  justify-content: flex-end;
}

.#{$prefix}listswiperaccordion-collapsed .#{$prefix}listswiperaccordion-multiple {
  // Collapsed wrappers with multiple actions on the right side
  &.#{$prefix}listswiperaccordion-wrapper-right {
    justify-content: flex-start;
  }

  // Collapsed wrappers with multiple actions on the left side
  &.#{$prefix}listswiperaccordion-wrapper-left {
    justify-content: flex-end;
  }

  // right/left side expander when 'collapsed'
  &.#{$prefix}listswiperaccordion-wrapper-right:after,
  &.#{$prefix}listswiperaccordion-wrapper-left:before {
    flex: 1;
  }

  // All other actions (not default) when collapsed
  &.#{$prefix}listswiperaccordion-wrapper-right .#{$prefix}listswiperaction:not(:last-child),
  &.#{$prefix}listswiperaccordion-wrapper-left .#{$prefix}listswiperaction:not(:first-child) {
    flex: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    border-width: 0 !important;
    border-color: transparent;
    opacity: 0;
  }

  // Default Action when collapsed should take up its normal width
  // We accomplish this with JS setting the flex basis
  &.#{$prefix}listswiperaccordion-wrapper-right .#{$prefix}listswiperaction:last-child,
  &.#{$prefix}listswiperaccordion-wrapper-left .#{$prefix}listswiperaction:first-child {
    flex: 0;
  }
}

.#{$prefix}listswiperaccordion-was-collapsed .#{$prefix}listswiperaccordion-multiple {
  // transitions from 'collapsed'
  &.#{$prefix}listswiperaccordion-wrapper > .#{$prefix}listswiperaction,
  &.#{$prefix}listswiperaccordion-wrapper:after,
  &.#{$prefix}listswiperaccordion-wrapper:before {
    transition: flex .4s ease-in,
    padding .15s ease-in .25s,
    border-color .4s ease-in,
    border-width .4s ease-in,
    min-width .4s ease-in,
    opacity .4s ease-in;
  }
}

.#{$prefix}listswiperundoable {
  opacity: 0;
  transition: opactiy 300ms ease-out;

  .#{$prefix}listswiperaccordion.#{$prefix}undo & {
    opacity: 1;
  }
}

.#{$prefix}listswiperaccordion.#{$prefix}undo .#{$prefix}listswiperaccordion-wrapper {
  background-color: transparent !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: background-color 300ms ease-out, opacity 300ms ease-out;
  .#{$prefix}listswiperaction {
    opacity: 0 !important;
    transition: opacity 300ms ease-out;
  }
}

// Change the opacity for both a simple list item and a complex one.
.#{$prefix}listswiperaccordion ~ * {
  transition: opacity 300ms ease-out;
}

.#{$prefix}listswiperaccordion.#{$prefix}undo ~ * {
  opacity: 0 !important;
  pointer-events: none;
}

// This is used to measure the actions inside of the menu, utility only!
.#{$prefix}listswiperaccordion-measure {
  display: flex;
  width: auto !important;
  position: absolute !important;
  & > * {
    flex: 1 0 auto !important;
  }
}