.audio-player {
  background: var(--primary-color, #1e1e1e);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 400px;
  user-select: none;

  .play-btn {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;

    span {
      font-size: 20px;
      color: var(--primary-text-color);
    }

    &:hover {
      background: color-mix(in srgb, var(--secondary-color) 30%, transparent);
    }
  }

  .timeline {
    flex: 1;
    height: 4px;
    background: color-mix(in srgb, var(--secondary-color) 60%, transparent);
    border-radius: 2px;
    position: relative;
    cursor: pointer;

    &:hover .progress-handle {
      opacity: 1;
    }
  }

  .progress {
    background: var(--primary-text-color, #fff);
    width: 0%;
    height: 100%;
    border-radius: 2px;
    transition: width 0.1s linear;
  }

  .progress-handle {
    width: 12px;
    height: 12px;
    background: var(--primary-text-color, #fff);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .time {
    color: var(--primary-text-color, #fff);
    font-family: monospace;
    font-size: 12px;
    min-width: 45px;
  }

  .volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .volume-btn {
    background: transparent;
    border: none;
    cursor: pointer;

    svg {
      width: 20px;
      height: 20px;
      fill: var(--primary-text-color, #fff);
    }
  }
}
