.player-wrap {
  width: 100%;
  display: flex;
  // background-color: var(--ant-color-fill-quaternary);
  border-radius: 6px;

  .player-ui {
    padding: 8px 16px;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .play-btn {
    margin-inline: 30px;
    height: 22px;
    width: 22px;

    .ant-btn {
      height: 22px;
      width: 22px;
    }
  }

  .backward,
  .forward {
    background: none !important;
  }

  .slider {
    display: flex;
    justify-content: center;
    align-items: center;

    .slider-inner {
      flex: 1;
    }
  }

  .play-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  .time {
    width: 52px;
    text-align: right;

    &.current {
      text-align: left;
    }
  }

  .progress-bar {
    margin-inline: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    .slider {
      width: 100%;
    }

    .file-name {
      margin-bottom: 6px;
      line-height: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      align-self: center;
      justify-content: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .ant-slider-horizontal {
      margin-block: 5px;
    }
  }

  .speaker {
    margin-left: 10px;
    position: relative;

    .volume-slider {
      position: absolute;
      bottom: 30px;
    }
  }
}