@mixin accordion-active {
  animation: accordion-down $accordion-animated-time;
  overflow-y: hidden;
  max-height: $accordion-animated-max-height;
  display: block;
}

@mixin accordion-not-active {
  transition: max-height $accordion-animated-time;
  overflow-y: hidden;
  max-height: 0;
}

@mixin accordion-horizontal-active {
  animation: accordion-horizontal-down $accordion-animated-time;
  overflow: hidden;
  max-width: 100%;
  display: block;
}

@mixin accordion-horizontal-not-active {
  transition: max-width $accordion-animated-time;
  overflow: hidden;
  max-width: 0;
}

.#{$accordions} {
  position: relative;
}

.#{$accordion-collapsible} {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 0;
  
  &:checked {
    pointer-events: none;
  }
  ~ .#{$accordion} {
    > input {
      ~ label, ~ .#{$accordion-label} {
         z-index: 1;
         position: relative;
      }
      ~ .#{$accordion-content} {
        z-index: 1;
        position: relative;
      }
    }
    > input:checked  {
      ~ label, ~ .#{$accordion-label} {
        pointer-events: none;
      }
    }
  }
}

.#{$accordion} {
  &.#{$accordion-horizontal} {
    align-items: stretch;
    display: flex;
    flex-flow: nowrap;
  }
  &.#{$accordion-hoverable} {
    &:hover {
      > .#{$accordion-content} {
        display: block;
      }
      > label, .#{$accordion-label} {
        @include accordion-label-active;
      }
      &.#{$accordion-label-hide} {
        > label, .#{$accordion-label} {
          display: none;
        }
      }
    }
    &.#{$accordion-animated}:not(.horizontal) {
      > .#{$accordion-content} {
        @include accordion-not-active;
      }
      &:hover {
        > .#{$accordion-content} {
          @include accordion-active;
        }
      }
    }
    &.#{$accordion-animated}.#{$accordion-horizontal} {
      > .#{$accordion-content} {
        @include accordion-horizontal-not-active;
      }
      &:hover {
        > .#{$accordion-content} {
          @include accordion-horizontal-active;
        }
      }
    }
  }
  &.#{$accordion-focusable} {
    > label, .#{$accordion-label} {
      &:focus {
        @include accordion-label-active;
        ~ .#{$accordion-content} {
          display: block;
        }
      }
    }
    > input  {
      &:focus {
        ~ label, ~ .#{$accordion-label} {
          @include accordion-label-active;
        }
        ~ .#{$accordion-content} {
          display: block;
        }
        &.#{$accordion-label-hide} {
          ~ label, ~ .#{$accordion-label} {
            display: none;
          }
        }
      }
    }
    &:focus {
      > .#{$accordion-content} {
        display: block;
      }
      > label, .#{$accordion-label} {
        @include accordion-label-active;
      }
      &.#{$accordion-label-hide} {
        > label, .#{$accordion-label} {
          display: none;
        }
      }
    }
    &.#{$accordion-animated}:not(.#{$accordion-horizontal}) {
      &:focus {
        .#{$accordion-content} {
          @include accordion-active;
        }
      }
      > label, .#{$accordion-label} {
        &:focus {
          ~ .#{$accordion-content} {
            @include accordion-active;
          }
        }
      }
      > input  {
        &:focus {
          ~ .#{$accordion-content} {
            @include accordion-active;
          }
        }
      }
      .#{$accordion-content} {
        @include accordion-not-active;
      }
    }
    &.#{$accordion-animated}.#{$accordion-horizontal} {
      &:focus {
        .#{$accordion-content} {
          @include accordion-horizontal-active;
        }
      }
      > label, .#{$accordion-label} {
        &:focus {
          ~ .#{$accordion-content} {
            @include accordion-horizontal-active;
          }
        }
      }
      > input  {
        &:focus {
          ~ .#{$accordion-content} {
            @include accordion-horizontal-active;
          }
        }
      }
      .#{$accordion-content} {
        @include accordion-horizontal-not-active;
      }
    }
  }
  &.#{$accordion-animated}:not(.#{$accordion-horizontal}) {
    > input {
      &:not(:checked) {
        ~ .#{$accordion-content} {
          @include accordion-not-active;
        }
      }
    }
    .#{$accordion-content} {
      display: block;
    }
    > input {
      &:checked {
         ~ .#{$accordion-content} {
          @include accordion-active;
        }
      }
    }
  }
  
  &.#{$accordion-animated}.#{$accordion-horizontal} {
    > input {
      &:not(:checked) {
        ~ .#{$accordion-content} {
          @include accordion-horizontal-not-active;
        }
      }
    }
    .#{$accordion-content} {
      display: block;
    }
    > input {
      &:checked {
         ~ .#{$accordion-content} {
          @include accordion-horizontal-active;
        }
      }
    }
  }
  
  &.#{$accordion-label-hide} {
    > input {
      &:checked {
        ~ label, ~ .#{$accordion-label} {
          display: none;
        }
      }
    }
  }

  > input {
    left: -10000px;
    position: fixed;
    &:checked {
      ~ .#{$accordion-content} {
        display: block;
      }
      ~ label, ~ .#{$accordion-label} {
        @include accordion-label-active;
      }
    }
  }
  .#{$accordion-content} {
    display: none;
  }
  > label, .#{$accordion-label} {
    .#{$accordion-arrow} {
      @include accordion-arrow-down;
    }
  }
  &.active {
    > label, .#{$accordion-label} {
      @include accordion-label-active;
    }
    .#{$accordion-content} {
      @include accordion-active;
    }
  }
}

@keyframes accordion-down {
  0% {
    max-height: 0;
  }
  80% {
    max-height: $accordion-animated-max-height/4;
  }
  99% {
    max-height: $accordion-animated-max-height/2;
  }
  100% {
    max-height: $accordion-animated-max-height;
  }
}

@keyframes accordion-up {
  0% {
    max-height: $accordion-animated-max-height;
  }
  1% {
    max-height: $accordion-animated-max-height/2;
  }
  20% {
    max-height: $accordion-animated-max-height/4;
  }
  100% {
    max-height: 0;
  }
}

@keyframes accordion-horizontal-down {
  0% {
    max-width: 0;
  }
  100% {
    max-width: 100%;
  }
}

@keyframes accordion-horizontal-up {
  0% {
    max-width: 100%;
  }
  100% {
    max-width: 0;
  }
}