$waveform-height: 165px;

.waveformBox-DrawerBtn {
  display: block;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: none;
  border-top: 1px solid var(--color-divider);
  font-size: 0;
  background-color: var(--color-background);
  cursor: pointer;

  &:focus {
    outline: none;
    border: 1px solid var(--color-font) !important;
  }
}

.waveformBox-FrameWrap {
  overflow: hidden;
  height: 0;
  font-size: 0;
  transition: height 0.4s;
}

.waveformBox-DrawerBtn_Arrow {
  fill: var(--color-font);
}

.waveformBox.isExpand {
  .waveformBox-FrameWrap {
    height: $waveform-height;
  }

  .waveformBox-DrawerBtn {
    border-bottom: 1px solid var(--color-divider);
  }

  .waveformBox-DrawerBtn_Arrow {
    transform: rotate(180deg);
  }
}

.waveformBox-Frame {
  width: 100%;
  height: $waveform-height;
  border: none;
  transition: opacity 0.4s;
}

.waveformBox-Frame-enter {
  opacity: 0;
}

.waveformBox-Frame-enter-active,
.waveformBox-Frame-exit {
  opacity: 1;
}

.waveformBox-Frame-exit-active {
  opacity: 0;
}
