


@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;transition-duration: $transition-duration;

  @if $transition-timing == ease-out-quart {

    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  } @else {

    transition-timing-function: $transition-timing;
  }
}

.gt-zoomsounds-examples-con{

}

.dzs--gutenberg-preview-block{

  $size: 180px;

  min-height: $size;
  max-height: $size;
  overflow: hidden;

  border: 3px solid #545c66;
  padding: 5px;
  position: relative;

  &:after{
    position: absolute;
    content: "";


    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(84,92,102,1) 100%);

    height: 50px;

    bottom: 0;
    left:0;
    width: 100%;
    opacity:1;

    $transition-property: opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  $transition-property: max-height;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);
  &.expanded{
    max-height: 1000px;




    &:after{
      opacity:0;
    }
  }

  .preview-block--expander{
    position: absolute;
    bottom: 3px;
    color: #eeeeee;
    font-size: 11px;
    padding: 5px;
    background-color: rgba(34, 34, 34, 0.47);
    left:50%;
    transform: translate(-50%,0);
    z-index: 1;
    cursor: pointer;

    text-transform: uppercase;
    font-weight: bold;
  }
}

