@import '../../style/common_mixin.css';
:host ::ng-deep .cmp-lrc-editor .ant-spin-container {
  width: 100%;
  height: 100%;
}
.cmp-lrc-editor{
  width: 100%;


  .step{
    width: 100%;
    height: 500px;
    position: relative;
    .content{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }

  .flex1{
    flex: 1;
  }
  .wave-player{
    display: inline-block;
    position: relative;
    width: 100%;
    canvas{
      width: 100%;
      height: 100px;
    }
  }
  .time-line{
    height: 100%;
    position: absolute;
    border: 0;
    top: 0;
    opacity: 0.5;
    width: 0px;
    z-index: 1;
  }
  .line-break{
    margin: 0 4px 0 8px;
  }
  .time-tag.warn{
    background: firebrick;
  }
  .time-tag:after {
    content: "\27A4";
  }


  .timestamp-container{
    width: 100%;
    flex: 1;
    overflow: auto;
  }
  .timestamp-line.selected{
    background: green;
  }
  .timestamp-line{
    display: flex;
    margin: 2px 0;
    height: 36px;
    line-height: 36px;
    .time-tag{
      flex: 0;
      margin-right: 4px;
    }
    .time-content{
      flex: 1;
    }
    .time-del{
      margin-left: 4px;
      flex: 0;
    }

  }
  .ctrl-bar{
    height: 100%;
    width: 0px;
    transform: translateX(50%);
    position: absolute;
    cursor: ew-resize;
    user-select: none;
    padding: 0 2px;
    box-shadow: 0.5px 0 0 blue;
  }
  .point-line{
    position: relative;
    height: 5px;
    .arrow-up.selected{
     border-bottom-color: #faad14;
    }
    .arrow-up {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      position: absolute;
      border-bottom: 5px solid black;
      //transform: translateX(-100%);
      .ctrl-bar{
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: 0.5px 0 0 blue;
        height: 100px;
        position: absolute;
      }
    }
  }
}

