@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;
    }
  }

  >div:first-child{
    cursor: not-allowed;
    cursor: no-drop;
  }
  .gutenberg-videogallery-con{
    pointer-events: none;
  }
  .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;
  }
}

.dzs-player-examples-con {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 10px;
  width: calc(100% - 10px);
}
.gt-dzs-examples-con {
  h5:not(.a) {
    cursor: pointer;
    font-size: 1.5em;
  }

  &:not(.opened) {

    div {
      display: none;

    }

    .dzs-player-examples-con {
      display: none;
    }
  }

  .the-icon {
    display: inline-block;
  }

  &.opened {


    .the-icon {
      transform: scale(0.5);
    }
  }
}


.dzs-player-example {
  background-color: #EEEEEE;
  cursor: pointer;

  width: 100%;
  display: block;
  overflow: hidden;

  border: 1px solid rgba(0,0,0,0.1);

  .the-img {
    display: block;
    width: 100%;
    display: block;
    overflow: hidden;
  }

  h6 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: arial, sans-serif;
  }

  .the-label{
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}