@import '../../styles/variables.less';

@hidable-prefix: ~'@{so-prefix}-hidable';
@select-prefix: ~'@{so-prefix}-select';
@treeSelect-prefix: ~'@{so-prefix}-treeSelect';

.@{hidable-prefix} {
  &-fade-animation-240 {
    transition: height 0.24s ease-in-out, opacity 0.24s ease-in-out;
  }

  &-fade-animation-360 {
    transition: height 0.36s ease-in-out, opacity 0.36s ease-in-out;
  }

  &-fade-animation-480 {
    transition: height 0.48s ease-in-out, opacity 0.48s ease-in-out;
  }

  &-animation-240 {
    transition: height 0.24s ease-in-out, opacity 0.24s ease-in-out, transform 0.24s ease-in-out;
  }

  &-animation-360 {
    transition: height 0.36s ease-in-out, opacity 0.36s ease-in-out, transform 0.36s ease-in-out;
  }

  &-animation-480 {
    transition: height 0.48s ease-in-out, opacity 0.48s ease-in-out, transform 0.48s ease-in-out;
  }

  &-scale-y {
    transform: scaleY(0);

    &.@{hidable-prefix}-show {
      transform: scaleY(1);
    }
  }

  &-fade,
  &-collapse-fade {
    opacity: 0;

    &.@{hidable-prefix}-show {
      opacity: 1;
    }
  }
}


//.@{select-prefix}-rtl,
//.@{treeSelect-prefix}-rtl {
//  .@{hidable-prefix}-scale-y {
//    transform: scaleY(0) translateX(-100%);
//
//    &.@{hidable-prefix}-show {
//      transform: scaleY(1) translateX(-100%);
//    }
//  }
//}