@import '../../style/themes/index';
@import '../../style/mixins/index';

@slideshow-prefix-cls: ~'@{zf-prefix}-slideshow';

.@{slideshow-prefix-cls} {
  .reset-component;

  position: relative;

  &-panel {
    display: inline-block;
    cursor: pointer;

    &-title {
      display: inline-block;
    }
    &-decoration {
      position: relative;
      display: inline-block;
      width: 21px;
      height: 21px;
      margin-left: 2px;
      line-height: 21px;
      vertical-align: middle;
      transform-origin: 50% 50%;
      // border: 1px solid green;
      transition: all 0.2s ease;

      &-inbox {
        position: absolute;
        top: -1.5px;
        left: 0.5px;
        width: 100%;
        height: 100%;
        text-align: center;
      }
    }
    &-up {
      transform: rotate(180deg);
    }
  }
  &-content {
    margin-top: 5px;
    overflow: hidden;
  }

  &-transition {
    transition: background 1s, height 1s, opacity 1s;
  }
  &-transition-appear,
  &-transition-enter {
    opacity: 0;
  }
  &-transition-appear&-transition-appear-active,
  &-transition-enter&-transition-enter-active {
    opacity: 1;
  }
  &-transition-leave-active {
    opacity: 0;
  }
}